How to align top nav bar with wrapper

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 class="wrapper">
                <nav class="topnav">
                    <ul class="topnavlist">
                        <li><a class="topnavlink">Menu 1</a></li>
                        <li><a class="topnavlink">Menu 2</a></li>
                        <li><a class="topnavlink">Menu 3</a></li>
                        <li><a class="topnavlink">Menu 4</a></li>
                        <li><a class="topnavlink">Menu 5</a></li>
                        <li><a class="topnavlink">Menu 6</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <main>
            <div class="wrapper">
                <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;
}