How to align top nav bar with wrapper-CodePudding

I'm new to this so apologies for any bad formatting and wrong terminology.

I'm trying to create a nav bar at the top of a page and have it the same width as my wrapper which is 1000px. I managed to get it to the center once but it didn't align with my wrapper and I cant even recreate that.

Any help at all would be appreciated, even if it doesn't directly answer my question

HTML:

<DOCTYPE html>
    <head>
        <link rel="stylesheet" href="navtest.css">
    </head>
<html>
    <body>
        <header>
            <div >
                <nav >
                    <ul >
                        <li><a >Menu 1</a></li>
                        <li><a >Menu 2</a></li>
                        <li><a >Menu 3</a></li>
                        <li><a >Menu 4</a></li>
                        <li><a >Menu 5</a></li>
                        <li><a >Menu 6</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <main>
            <div >
                <p>Main Text</p>
            </div>
        </main>
    </body>
</html>

CSS:

.topnavlist {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    text-align: center;
}

.topnavlink {
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
    display: block;
    float: left;
}

.topnavlink:hover {
    background-color: #111;
}

header {
    position: fixed;
    top: 0;
    width: 1000px;
}

.wrapper {
    margin: auto;
    width: 1000px;
    position: relative;
}

body {
    padding-top: 50px;
}

CodePudding user response：

Do you mean like this?

.topnavlist {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    text-align: center;
    display:flex;
    justify-content:center;
}

.topnavlink {
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
    display: block;

}

.topnavlink:hover {
    background-color: #111;
}

header {
    margin:0 auto;
    top: 0;
    width: 1000px;
}

.wrapper {
    margin: 0 auto;
    width: 1000px;
    position:fixed;
    top:0;
}

body {
    padding-top: 50px;
}
html
css

<DOCTYPE html>
    <head>
        <link rel="stylesheet" href="navtest.css">
    </head>
<html>
    <body>
        <header>
            <div >
                <nav >
                    <ul >
                        <li><a >Menu 1</a></li>
                        <li><a >Menu 2</a></li>
                        <li><a >Menu 3</a></li>
                        <li><a >Menu 4</a></li>
                        <li><a >Menu 5</a></li>
                        <li><a >Menu 6</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        
        <main>
            <div>
                <p>Main Text</p>
            </div>
        </main>
    </body>
</html>

CodePudding user response：

Thanks FLYAX, problem was I think header getting in the way somehow, I ended up removing it completely and it fixed my problem.