'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;
}
htmlcss


Solution 1:[1]

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 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>
                <p>Main Text</p>
            </div>
        </main>
    </body>
</html>

Solution 2:[2]

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

This part of the code was interfering with the positioning of the nav bar, removing it fixed the issue and didn't cause any other problems.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Crystal
Solution 2

Related Questions