Issue centring unordered nav list

Hi guys!

I’ve just started Challenge Project - Build a Website Design System. I’ve got an unordered nav list that I’m trying to centre but it’s about 10px off and I can’t figure out why. Obviously I could change the position property to relative and shift it a few pixels manually, but I’d like to know why it hasn’t centred properly and how to do it without manually jiggling it around because I assume (perhaps wrongly?) that that isn’t best practice. HTML and CSS pasted below. I had to set the language in the codebyte to JS because there isn’t an option for HTML/CSS for some reason.

Thanks!

<!DOCTYPE html>
<html>
    <head>
        <title>Website Design Help</title>
        <link href="WDH.css" rel="stylesheet">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" rel="stylesheet">
    </head>
    <body>
        <header>
            <div id=title>
                <h1>Website Design Help</h1>
                <p id=myname>by Alex Hook-Gordon</p>
            </div>
            <nav>
                <ul>
                    <li>Colours</li>
                    <li>Fonts</li>
                    <li>Text Styles</li>
                </ul>
            </nav>
        </header>
        <section id=colours>
            <h2 class=subhead>Colours</h2>
            <div class=colourbox id=red>
                <p class=colour>Red</p>
                <p class=hexcode>Some Hexcode</p>
            </div>
            <div class=colourbox id=blue>
                <p class=colour>Blue</p>
                <p class=hexcode>Some Hexcode</p>
            </div>
            <div class=colourbox id=green>
                <p class=colour>Green</p>
                <p class=hexcode>Some Hexcode</p>
            </div>
            <div class=colourbox id=purple>
                <p class=colour>Purple</p>
                <p class=hexcode>Some Hexcode</p>
            </div>
            <div class=colourbox id=pink>
                <p class=colour>Pink</p>
                <p class=hexcode>Some Hexcode</p>
            </div>
            <div class=colourbox id=yellow>
                <p class=colour>Yellow</p>
                <p class=hexcode>Some Hexcode</p>
            </div>
        </section>
        <section id=fonts>
            <h2 class=subhead>Fonts</h2>
        </section>
        <section id=styles>
            <h2 class=subhead>Text Styles</h2>
        </section>
    </body>
</html>
h1 {
    font-size: 60px;
    text-align: center;
    font-family: "Roboto Condensed";
    font-weight: bold;
    letter-spacing: -3px;
    border: 6px solid black;
    height: auto;
    width: 500px;
    margin: 0 auto;
    padding: 15px;
    position: relative;
    top: 34px;
}

#title { 
    background-image: url(back1.png);
    height: 180px;
}

#myname {
    font-family: "Roboto Condensed";
    font-weight: bolder;
    text-align: center;
    position: relative;
    bottom: -25px;
}

nav ul {
    margin: 20px auto;
    text-align: center;
}

nav ul li {
    padding: 20px;
    display: inline-block;
    border: 1px solid black;
    margin: 0 auto;
}

The site CSS should be loaded last, after all the fonts.

Because Codebyte is meant for running actual code (that runs) not for formatting code samples. Use the Markdown to post HTML, CSS and any code that does not Run.

Why?

Post must be 20 chars so here’s more text.

Markdown is simple, easy to read and more appropriate. Codebytes stretch page load time significantly.

I asked you why in response to “The site CSS should be loaded last, after all the fonts.”.

The fonts need to be loaded before they are called into the rendering.