Buttons are shifted away from the line
<p>I am making a website currently, and when I created a row of buttons a few of them were slightly shifted from the line.</p>

<p>My website: <em>(unfortunately just a template so I can't really send you the link)</em>
<a href="https://i.stack.imgur.com/sAtYi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sAtYi.png" alt="enter image description here"></a></p>

<p>Code:<em>(HTML)</em></p>

<p><a href="https://i.stack.imgur.com/3lOHz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3lOHz.png" alt="enter image description here"></a></p>

<p>Code:<em>(CSS)</em></p>

<p><a href="https://i.stack.imgur.com/0MJ9g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0MJ9g.png" alt="enter image description here"></a></p>

<p>It seems weird to me as the buttons are set 100% of the height of their container, so technically they aren't suppose to get out of it anyway. I tried messing with the width and height of the container, but nothing seems to work. Perhaps I am missing something simple.</p>

<p>If any other parts of the stylesheet needed I can post it.</p>

<p>I'm not sure if everyone got my problem. I'm saying that it's pretty weird that while the button's height is set <em>100%</em>, a few of the buttons still manage to move slightly down from the majority of buttons.</p>

<p><a href="https://i.stack.imgur.com/FR4kS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FR4kS.png" alt="enter image description here"></a></p>