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


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>
        <title>The Tea Cozy</title>
        <link href="./resources/index.css" rel="stylesheet">


        <!--header bar-->

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

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

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