Search code examples
htmlcssalignmentcss-float

horizontal menu in html displaying wrong while removing float property in css

I have a website build in HTML and CSS, now I am making small changes to the template as I bought it from Envato, the header menu is aligned to the left by default using the following CSS:

.horizontalMenu>.horizontalMenu-list {
    text-align: left;
    margin: 0 auto 0 auto;
    width: 100%;
    display: block;
    padding: 0;
}
.horizontalMenu>.horizontalMenu-list>li {
    text-align: center;
    display: block;
    padding: 0;
    margin: 0;
    float: left;
    padding: 0.45rem 0;
}

enter image description here

now I want to make the menu to come in the center so I removed the float property from the CSS and now the menu is displaying like below:

enter image description here

can anyone please tell me what could be wrong here or how to fix it, thanks in advance

Solution

  • The nav items are aligned vertically because nav-item display CSS attribute is block. So it's aligned one on one line.

    Simply, to align items on the center, you can use flex layout as follows.

    .horizontalMenu>.horizontalMenu-list {
    text-align: left;
    margin: 0 auto 0 auto;
    width: 100%;
    padding: 0;

    display: flex;
    justify-content: space-between;
}