Why is there a white space at the top of my nav?

Question

Why is there a gap at the top of my nav bar? New to this and trying to figure out what I did wrong... I know when I take off the position fix it sites well at the top of the page.

Could it be the display: flex; that is causing the issue? Thank you in advance for your replies.

Apparently ive got to write a whole book just to get and answer to this question.

html {
        margin: 0;
        padding: 0;
    }
    
    body {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 22px;
        color: seashell;
        background-color: black;
        opacity: 0.9;
    }
    
    nav {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: 1px solid seashell;
        position: fixed;
        width: 100%;
        z-index: 10;
        background-color: black;
    }
    
    #logo img{
        height: 50px;
    }
    
    nav ul {
        list-style: none;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    nav ul li {
        text-decoration: underline;
        padding-right: 20px;
    }
    
    #mission-statement-body {
        position: relative;
        top: 100px;
        background-image: url("images/img-mission-background.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: 700px;
        width: 1200px;
        margin: 0 auto;
    }
    
    #mission-statement {
        text-align: center;
        background-color: black;
    }

<nav>
        <div id="logo">
            <img src="images/img-tea-cozy-logo.png" />
        </div>
        <ul>
            <li>Mission</li>
            <li>Featured Tea</li>
            <li>Locations</li>
        </ul>
    </nav>

    <div id="mission-statement-body">
        <div id="mission-statement">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
    </div>

Answer 1

The top property is set to a specific value when using position: fixed, so you can avoid that by setting top to 0.

Answer 2

TL:DR - Just set the top of the fixed positioned element to 0 and it will get, well, 'fixed to the top of the browser screen'.

At first try to run your code as an example so it's easier to answer your question. You could simulate the outcome with Codepen (my personal favorite) or the inline code snippet from stackoverflow (I see you're familiarized with some tools like code highlight, the next step would be simulating the code like Abed Putra did ).

I tested your code on CodePen and couldn't figgure out why it had that offset, weird enough when I removed the #mission-statement-body the nav got back to top (browsers right).

Basically the 'float around my browser' positions like absolute and fixed inherits the positioning from the closest relative parent, but in your case there is no such thing (so it inherits from god-knows-what).

So everytime you use those positioning properties try to set the specific positions (like top, left, bottom or right). Don't rely on default browser positioning because they will always disappoint you, it might look ok on Chrome but weird on Firefox.

Click to see the code on CodePen

Some other observations about your code:

• Try not to use ids to set CSS rules, for several reasons but basically they are meant to be very specific selectors (JS treatment for example) and any CSS component should be replicable and extendable (you could have 2 navs, one fixed and one static and with ids you would have to duplicate the code or do some workarounds not considered best practices).
• Try not to use Helvetica, not only most computers don't have it installed, but they are very different from your secondary (Arial) and the lenght of the words could be a problem that you wouldn't see when developing, like nav itens breaking lines or buttons getting to big in Helvetica but not in Arial. (also, Helvetica is a paid font if you're trying to really use it you would have to buy it)
• I think would be best to use margin or padding on relative positioned elements, rather than top spacing used in #mission-statement-body. Also, with these you wouldn't have to set the position

Hope it helped

Answer 3

have you tried this?

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid seashell;
  position: fixed;
  width: 100%;
  z-index: 10;
  background-color: black;
  top:0;
}

Please check this out...

   html {
    margin: 0;
    padding: 0;
}

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid seashell;
  position: fixed;
  width: 100%;
  z-index: 10;
  background-color: black;
  top:0;
}

#logo img{
    height: 50px;
}

nav ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
}

nav ul li {
    text-decoration: underline;
    padding-right: 20px;
}

#mission-statement-body {
    position: relative;
    top: 100px;
    background-image: url("images/img-mission-background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 700px;
    width: 1200px;
    margin: 0 auto;
}

#mission-statement {
    text-align: center;
    background-color: black;
}

<nav>
        <div id="logo">
            <img src="images/img-tea-cozy-logo.png" />
        </div>
        <ul>
            <li>Mission</li>
            <li>Featured Tea</li>
            <li>Locations</li>
        </ul>
    </nav>

    <div id="mission-statement-body">
        <div id="mission-statement">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
    </div>