Make a nav bar spaced out and centered on the page

Hello,

I’m looking to have my nav bar have its links spaced out, and be fixed on the top and centered on the page.

I’m really stumped as to how to proceed, can anyone help me? Any help cleaning my code up would also be much appreciated.

This is what I have so far while I was tinkering with the code:

.navigationBar {
    width: 100%;
    display: flex;
}

nav {
    text-align: center;
    position: fixed;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
}

nav li {
    margin: 10px;
    padding: 10px;
}
<body>
        <article class="navigationBar">
            <nav>
                <ul>
                    <li><a href="./index.html">Home</a></li>
                    <li><a href="./about-me.html">About Me</a></li>
                    <li><a href="./contact.html">Contact</a></li>
                    <li><a href="./index-fr.html">Français</a></li>
                </ul>
            </nav>
        </article>
    </body>

Hey @andrew_ng

All you need to do is to add a width to your nav selector that’s why it looks like isn’t working but once you add it, your <li>'s will be spaced out and your nav bar fixed just as you want .

Your <article class="navigationBar"> is useless since flexbox code works on its direct children but <nav> is the only direct children and you didn’t add any flexbox properties to it (if you deactivate the CSS you applied on .navigationBar on the DevTools you’ll see that nothing change).
And you don’t need text-align: center; in this case, everything else is good and well implemented.

I hope this helps :slight_smile:

Yes, that does! Thank you!