Social media icons are not aligning-CodePudding

Making a footer with social media icons and the images are entered but one is oddly higher than the other. Not sure how to fix it :(. Here is my html code:

<div >
              <li><a href="https://www.facebook.com/Geekyourselfout/"><img src="facebook-box-fill.png" alt="Facebook"</a></li>
              <li><a href="https://www.instagram.com/geekyourselfout/"><img src="instagram-fill.png" alt="Instagram"</a></li>
            </div>

And the external CSS code:

.socials  {
  Display: flex; 
  Align-items; center;
  Justify-content: center; 
 }
.socials img  {
  Width: 50px;
  Height: 50px;
  }
.socials a  {
  Text-decorations: none;
  }
.socials li {
  List-style-type: none;
  }
.socials a:hover {
  Color: red;
  }

Here's a picture of how it looks rn All advice and help will be appreciated, thanks in advance :).

CodePudding user response：

It is probably because of your typos. "align-items;" "items:","text-decorations","text-decoration"

CodePudding user response：

Looks like there might be some typos in your css. Align-items; center; should be: align-items: center;. Also Text-decorations is not a css property, it's text-decoration.

Try that out. (FYI, it's not generally common to capitalize css properties, I'd change those all to lowercase.)