title: Social media icons are not aligning
body: <p>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:</p>
  <pre><code>&lt;div class=&quot;socials&quot;&gt;
      &lt;li&gt;&lt;a href=&quot;https://www.facebook.com/Geekyourselfout/&quot;&gt;&lt;img src=&quot;facebook-box-fill.png&quot; alt=&quot;Facebook&quot;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;https://www.instagram.com/geekyourselfout/&quot;&gt;&lt;img src=&quot;instagram-fill.png&quot; alt=&quot;Instagram&quot;&lt;/a&gt;&lt;/li&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And the external CSS code:</p>
  <pre><code>.socials  {
    display: flex; 
    align-items: center;
    justify-content: center; 
   }
  .socials img  {
    width: 50px;
    height: 50px;
    }
  .socials a  {
    text-decoration: none;
    }
  .socials li {
    list-style-type: none;
    }
  .socials a:hover {
    color: red;
    }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/TXylK.png" rel="nofollow noreferrer">Here's a picture of how it looks rn</a>
  All advice and help will be appreciated, thanks in advance :).</p>