The social media logos in my footer are not lining up horizontally-CodePudding

Im trying to have the two social media logos appear horizontal, but for some reason “display: inline-block;” is not working. I have tried moving the display property to social instead of social img and it still wont budge. If possible, can someone please explain what i am doing wrong or missing.

.copyright{
    padding: 2% 4%;
    width: 50%;
    float: left;
    text-align: center;
}
.social{
    float: right;
    width: 20%;
    padding: 2%;
}

.social img{
    display: inline-block;
    width: 20%;
    padding:2%;
}

<footer>
  <div >
            <p>&copy; Copyright 2022. All Rights Reserved</p>
            <p><a href="mailto:[email protected]">[email protected]</a></p>
    </div>
        
    <div >
            <a href="https://www.facebook.com/fwdfitclub" target="_blank"><img src="facebook-logo.png" alt="black and white facebook logo" ></a>
            <a href="https://www.twitter.com/fwdfitclub" target="_blank" ><img src="twitter-logo.png" alt="black and white twitter logo" ></a>
    </div>
</footer>

CodePudding user response：

Remove the float and set flex on footer with align-items: center;.

.copyright {
  padding: 2% 4%;
  width: 50%;
  float: left;
  text-align: center;
}

.social {
  width: 20%;
  padding: 2%;
}

.social img {
  display: inline-block;
  width: 20%;
  padding: 2%;
}

footer {
  display: flex;
  align-items: center;
}

<footer>
  <div >
    <p>&copy; Copyright 2022. All Rights Reserved</p>
    <p><a href="mailto:[email protected]">[email protected]</a></p>
  </div>
  <div >
    <a href="https://www.facebook.com/fwdfitclub" target="_blank"><img src="https://dummyimage.com/50/000/fff" alt="black and white facebook logo"></a>
    <a href="https://www.twitter.com/fwdfitclub" target="_blank"><img src="https://dummyimage.com/50/000/fff" alt="black and white twitter logo"></a>
  </div>
</footer>

CodePudding user response：

I think it's because your <img> tag is wrapped by <a></a> Perhaps you could try this

.social a{
    display: inline-block;
}

CodePudding user response：

Use display: flex for lining up horizontally the elements (.social and footer) So:

footer,
.social,
.copyright {
  display: flex;
  align-items: center
}