Center Menu

hello pedrolaia!
try this following steps:

Give #top-menu an explicit width width: 450px and margin: 23px auto 0 auto;

Get rid of the float: left.

Alternatively, make the li elements inline blocks display: inline-block and use text-align: center on their parent.

Thanks so much for your help @shemapatrick. ??

@pedrolaia: Following the above guidance, I was able to get your menu centred using the following CSS snippet:

@media screen and (min-width: 840px) {
    .main-navigation, body:not(.long-menu) .main-navigation {
        float: inherit;
        text-align: center;
        border-left: 0;
    }

    .main-navigation li {
        float: inherit;
        display: inline-block;
    }
}

Let us know how you get on.

Thank you both, it worked but it terms of vertical alignment it came down (in comparison with the Logo).

I tried to work with padding-top and margin-top, but can’t get the menu to be in the same “line” as the Logo.

https://www.joaokopke.com

hi pedrolaia
you can also try this and see

Remove float: left; style and add this style:

ul#top-menu {
margin: 0 auto;
width: 425px; /*the menu width*/
}

The following would also bring the menu inline with the logo, using the CSS provided:

body.long-menu .main-navigation {
    clear: none;
}

I tried first the code from Siobhan and it worked! Thanks one more time.

Since Siobhan’s code worked I didn’t tried your code, Shema. Hope you don’t mind and thank you very much for your help.

I’m glad that helped out! ??