Why is the caption not centered vertically (visually raised 2 pixels up)?

Question

HTML

https://codepen.io/Larka_Ska/pen/oPEjoW
Actually, I don't have a solid knowledge of css, because of this I can't understand why the inscription on the purple button is creeping up.
I think there is something wrong with the line-height... or maybe not.
It is important that the button is 40px high and the caption is 15px high, i.e. the height of the letters and padding should end up being 40px. It is impossible to set the height of the div in which the button is placed in these 40 px.
ps do not pay attention to the fact that the sandwich icon is blurry. It will be 40 by 40 px in svg in the end.

Answer 1

Line - height can be removed, and for added.menu-button a.menu-button

display: flex;
align-items: center;

Answer 2

a {
  position: relative;
  top:1px
}

I think that it was the underlining from the link (it remained on hover) and took 1px