li items list in reverse

user_16880334 0
Viewed 62

This is my portfolio: http://nayer.42web.io/ I have used HTML, CSS, and Bootstrap. There is a problem with my li elements which I can't figure out. They all list in reverse, both header and footer. For example, I have my header as:

<header id="header">
        <nav id="main-nav">
            <ul class="menu">
                <li id="brand" style="float:left; font-family:'Dancing Script', sans-serif;font-weight:800;font-size:1.5rem"><a href="index.php">Nira</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#logos">Contact</a></li>
                <li><a href="about.html">About</a></li>

            </ul>
        </nav>
    </header>

But on my page, it gets listed in the following order: Nayer About Contact Projects. Of course, I can list them in reverse myself so when it gets reversed it shows in the right order, but I wonder what my code's issue is. Thanks in advance

bootstrap-4 css
1 Answers

You have this on your css:

nav li {
    float: right;
    padding-top: 1em;
    padding-bottom: 1.3em;
    padding-right: 1.1em;
    padding-left: 1.1em;
    vertical-align: middle;
}

The float right sets your first item to the far right position, then the second items on it left and so on ... which reverses the order. Then you have a float left for your "Nira" item that sets it to the far left.

You can refer to this for more details: HTML float right element order

user_104635520
Related