Tiny horizontal alignment issue on nav main menu

Hi there,

Please see this picture: https://tinyurl.com/yy937lk7

Can you recheck the link? the url doesn't seem to be working.

I'm not sure I understand what you mean but if you need to play around with the "service" button, here's the CSS:

.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a{
padding: 8px 18px 10px 18px;
}

The paddings (top right bottom left) are what controls the spacing between the text and the border.

Hello Elvin,

Thank you for your help. The link i've sent you is working. Can you check again?
The code you gave me doesn't solve my issue because it moves "Services" text above the other main menu items. It break the overall alignment but it does horizontally center Service inside its borders.

Do you think you could help me a bit more? Best, Adrien

This is pretty tricky to deal with as there actually isn't any margin.

What you see is the line-height.

You can try adjusting it to your preference by using this CSS:

.main-navigation .main-nav ul li a{
line-height: 12px
}

But I don't think you can get a pixel perfect accuracy with this.

You can try this though: https://css-tricks.com/how-to-tame-line-height-in-css/

Fonts are pretty tricky to deal with in general as there are no CSS that specifically controls the leading, ascender, descender, and x-height to the font's baseline.

Thank you very much Elvin! It's solved.

No problem. :)