0

I have created these divs that serve as buttons to redirect to a different site page, and for some reason I cannot get them to place side by side. I have tried everything including flexbox, and I cannot seem to get the divs side by side. What am I doing wrong.

IS there an easier way to go about what I want to accomplish? Or is it a simple easy mistake that I looked over.

html, body {
    margin: 0;
    height: 100%;
}
.img_container {
    border: none;
    width: 70%;
    padding: 10px;
    height: auto;
    display: block;
    justify-content: center;
    align-items: center;
}
a {
    text-decoration: none;
}
a:link, a:visited {
    color: #b3ab7d;
}
a:hover {
    color: #b3ab7d;
}
.background {
    background: #104723;
    width: 150px;
    height: 150px;
}
.img {
    width: 70%;
    display: block;
    margin: 0 auto;
}
a {
    display: block;
    text-align: center;
}
.text{
  font-size: 70%;
}
*{
    box-sizing: border-box;
}
.center {
    justify-content: center;
    align-items: center;
}
<div class="center">
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Access Control (AC)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Identification & Authentication (IA)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Media Protection (MP)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Physical Protection (PE)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">System & Communications Protection (SC)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">System & Information Integrity (SI)</span>
    </div>
    </a>
</div>
</div>
BeerusDev
  • 1,444
  • 2
  • 11
  • 30

3 Answers3

3

You have forgotten display: flex; in your .center class name.

Check your updated snippet.

html, body {
    margin: 0;
    height: 100%;
}
.img_container {
    border: none;
    width: 70%;
    padding: 10px;
    height: auto;
    display: block;
    justify-content: center;
    align-items: center;
}
a {
    text-decoration: none;
}
a:link, a:visited {
    color: #b3ab7d;
}
a:hover {
    color: #b3ab7d;
}
.background {
    background: #104723;
    width: 150px;
    height: 150px;
}
.img {
    width: 70%;
    display: block;
    margin: 0 auto;
}
a {
    display: block;
    text-align: center;
}
.text{
  font-size: 70%;
}
*{
    box-sizing: border-box;
}
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}
<div class="center">
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Access Control (AC)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Identification & Authentication (IA)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Media Protection (MP)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">Physical Protection (PE)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">System & Communications Protection (SC)</span>
    </div>
    </a>
</div>
<div class="img_container">
    <a href="https://www.google.com" class="btn">
    <div class="background">
        <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Angular_one_color_inverse_logo.svg/1024px-Angular_one_color_inverse_logo.svg.png" alt="logo" />
        <span class="text">System & Information Integrity (SI)</span>
    </div>
    </a>
</div>
</div>
2

Display flex; seems to be missing.

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}
Zinox
  • 519
  • 9
  • 24
1

Just remove width from below class and add float left or right as pr need.

.img_container {
    border: none;
    width: auto;
    padding: 10px;
    height: auto;
    display: block;
    justify-content: center;
    align-items: center;
    float: left;
}
Furquan
  • 1,542
  • 16
  • 20