Icons( A href tags) not displaying in row direction(horizontal line)

Question

Please why do my icons not arrange in a row despite the div property set to flex. Also note that the icons are embedded in a tags. Here is the code in HTML

<div class="social-media">
        <a href="#"><i class='bx bxl-twitter'></i></a>
        <a href="#"><i class='bx bxl-facebook-circle'></i></a>
        <a href="#"><i class='bx bxl-instagram-alt'></i></a>
        <a href="#"><i class='bx bxl-linkedin'></i></a>
        </div>  
        <a href="#" class="btn">Download CV</a>
    </div>
    <div class="main-img">
        <img id="img" src="../Images/person.jpg" alt="">
    </div>

CSS

.social-media a{

```
text-decoration:  none;
border: 3px solid #0ef;
border-radius: 50%;
justify-content: center;
align-items: center;
display: flex;
padding: 10px;
color: #0ef;
background: transparent;
transition: 0.5s;
width: 40px;
height: 40px;
font-size: 20px;
/*  margin: 0 25px 0 0;*/
}
.social-media a:hover{
    background-colour: #0ef;
    colour: #1f242d;
}
.social-media{
    width: 50%;
    padding: 20px 0;
}
```

I ran the code but it displayed in column like thisThe rendered result But i expected the icons to be displayed in the same line

Answer 1

Your anchor tags(logos) does not know where to transition since you didn't give the starting location and the end location. you need to use transition:translateX(.,.) to move your objects in horizontal axis.

Search for Flexbox tutorials!

Answer 2

You have a little misconception of how "flex" work... The element that has to have the display:flex property is the item container, and not their direct children (they become flex items automatically). So take the flex related properties out of the ".social-media a" selector and put them directly to the container:

.social-media {
    display: flex;
    justify-content: center;
    align-items: center;
}