Nav bar put in position: fixed; shrinks to the left?

Hello,

I’m attempting to make the nav bar fixed in this project but when I do it shrinks the nav bar down to the left margin. I’m sure its due to my messy code, but any help would be greatly appreciated.

* {
    font-family: Helvetica;
    font-size: 22px;
    color: seashell;
    background-color: black;
    text-align: center;
    z-index: 0;
}

.nav-main {
    font-size: 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 69px;
    border-bottom: 1px solid seashell;
    z-index: 5;
    background-color: black;
    position: fixed;
}

.leftnav {
    margin-left: 10px;
}
.logo {
    height: 50px;
}

.banner {
    background-image: url("images/img-mission-background.jpg");
    height: 700px;
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.bannertext {
    display: inline-block;
    align-items: center;
    margin-top: 350px;
    width: 100%;
}

<!DOCTYPE html>
<html>
    <head>
        <title>The Tea Cozy</title>
        <link href="./resources/index.css" rel="stylesheet">
    </head>

    <body>

        <!--header bar-->

        <div>
            <header class="nav-main">
                <nav class="leftnav">
                    <img src="./resources/images/img-tea-cozy-logo.png" class="logo">
                </nav>
                <nav class="rightnav">
                    <a href="#" class="rightnav">Mission</a>
                    <a href="#" class="rightnav">Featured Tea</a>
                    <a href="#" class="rightnav">Locations</a>
                </nav>
                    
            </header>
        </div>

        <!--Banner-->
        <div class="banner">
            <banner class="bannertext">
                <h2>Our Mission</h2>
                <p>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</p>
            </banner>
        </div>


https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-22-making-a-website-responsive/modules/wdcp-22-layout-with-flexbox/projects/tea-cozy

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.