Navigation bar lists aren't being centered

Question

[The home button has been listed before the Call Us and About buttons, but for some reason it pops up on the right after the those buttons. I just want it to be listed afterwards and keep all these lists in the centre, I believe something is wrong with my CSS file, I am also new to stackoverflow so please bear with me on this post. Thank you.] Image

body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}


ul {
    list-style-type: none;

    padding: 1.2%;
    margin:0;
    overflow: hidden;
    background-color: #000000;
}

li {

    float: right;
}

li a {
    font-size: 18px;
    font-weight: bold;
    display: block;
    color: white;
    text-align: center;
    padding: 26px 26px;
    text-decoration: none;
    transition: 0.3s;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: #3498DB ;
}

.dropdown {
    float: right;
    overflow: hidden;
}


.dropdown .dropbtn {
    font-weight: bold;
    font-size: 18px;
    border: none;
    outline: none;
    color: white;
    display: block;
    padding: 26px 26px;
    background-color: inherit;
    font-family: sans-serif; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
    transition: 0.3s;
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: #3498DB;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;

}

/* Links inside the dropdown */
.dropdown-content a {
    font-family: sans-serif;
    font-weight: bold;
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

<!doctype html>
<html>
    <head>
        <title> IBS TEST </title>
        <link rel="stylesheet" type="text/css" href="CSS/style.css">
    </head>

<body>

<header>

    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>


            <div class="dropdown">
                <button class="dropbtn">About Us
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-content">
                    <a href="PAGES/who.html">Who we are?</a>
                    <a href="PAGES/contact.html">Contact Us</a>

                </div>
            </div>
           <li><a href="tel:+6166161">Call Us</a></li>

        </ul>
    </nav>



</header>


<b>this is home</b>

</body>


</html>

score 2 · Accepted Answer · edited Jan 11 '21 at 10:37

The altered alignment is because you are floating the li's to the right - which means the first li in the DOM will be the most right when rendered. Simply remove this and and add some flex styling to center the li's and it will all work.

So - add display:flex to the ul, and align:center to center the li's vertically and justify-content: center to center the li's horizontally within the nav element.

Also - you have a div as a direct child of the ul - this is not semantically correct - you need to put that div inside an li to make it valid html.

body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}



ul {
    list-style-type: none;
    padding: 1.2%;
    margin:0;
    overflow: hidden;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
}


li a {
    font-size: 18px;
    font-weight: bold;
    display: block;
    color: white;
    text-align: center;
    padding: 26px 26px;
    text-decoration: none;
    transition: 0.3s;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: #3498DB ;
}

.dropdown {
    overflow: hidden;
}


.dropdown .dropbtn {
    font-weight: bold;
    font-size: 18px;
    border: none;
    outline: none;
    color: white;
    display: block;
    padding: 26px 26px;
    background-color: inherit;
    font-family: sans-serif; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
    transition: 0.3s;
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: #3498DB;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;

}

/* Links inside the dropdown */
.dropdown-content a {
    font-family: sans-serif;
    font-weight: bold;
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

<!doctype html>
<html>
    <head>
        <title> IBS TEST </title>
        <link rel="stylesheet" type="text/css" href="CSS/style.css">
    </head>

<body>

<header>

    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li>
              <div class="dropdown">
                <button class="dropbtn">About Us
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-content">
                    <a href="PAGES/who.html">Who we are?</a>
                    <a href="PAGES/contact.html">Contact Us</a>

                </div>
            </div>
           </li>
           <li><a href="tel:+6666">Call Us</a></li>

        </ul>
    </nav>



</header>


<b>this is home</b>

</body>


</html>

glad to have helped. If you could click the "accept solution" - then other devs willknow the issue has been resolved. Happy coding :) — gavgrif, Jan 11 '21 at 05:37
could u edit the number part? I accidently put it in and i cant seem to delete your answer .....I would really appreciate it, its the "tel" part — renegadedev, Jan 11 '21 at 05:47
sorry - not sure what you mean - please expain what you need to happen. — gavgrif, Jan 11 '21 at 05:49

Navigation bar lists aren't being centered

1 Answers1