Почему наверху моей навигации есть пустое место?

Свойство top устанавливается на определенное значение при использовании position: fixed, так что вы можете избежать этого, установив top в 0.

Вы пробовали это?

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

Пожалуйста, проверьте это ...

   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>

TL: DR - Просто установите top элемента с фиксированным позиционированием на 0, и он будет, ну, в общем, «зафиксирован в верхней части экрана браузера».

Сначала попробуйте запустить ваш код в качестве примера, чтобы было проще ответить на ваш вопрос. Вы можете смоделировать результат с помощью Codepen (мой личный фаворит) или встроенного фрагмента кода из stackoverflow (я вижу, вы знакомы с некоторыми инструментами, такими как выделение кода, следующим шагом будет симуляция кода, подобного Абед Путра сделал).

Я протестировал ваш код на CodePen и не мог понять, почему у него было это смещение, достаточно странно, когда я убрал #mission-statement-body, когда навигация вернулась наверх (браузеры справа).

В основном позиции типа «плавать вокруг моего браузера», такие как absolute и fixed, наследуют расположение от ближайшего родителя relative, но в вашем случае такого нет (поэтому он наследует от «бог знает что» ).

Таким образом, каждый раз, когда вы используете эти свойства позиционирования, пытайтесь установить определенные позиции (например, top, left, bottom или right). Не полагайтесь на расположение браузера по умолчанию, потому что они всегда вас разочаруют, это может выглядеть нормально в Chrome, но странно в Firefox.

Нажмите, чтобы увидеть код на CodePen

Некоторые другие замечания о вашем коде:

• Старайтесь не использовать id s для установки правил CSS по нескольким причинам, но в основном они предназначены для очень специфических селекторов (например, JS-обработка), и любой компонент CSS должен быть воспроизводимым и расширяемым (у вас может быть 2 nav с, один фиксированный и один статический и с id с вам придется продублировать код или сделать несколько обходных путей, не считающихся лучшими практиками).
• Старайтесь не использовать Helvetica, не только на большинстве компьютеров он не установлен, но они сильно отличаются от вашего дополнительного (Arial), и длина слов может быть проблемой, которую вы не увидите при разработке, как навигация, когда ломаются линии или кнопки, которые становятся большими в Helvetica, но не в Arial. (также Helvetica является платным шрифтом, если вы пытаетесь действительно использовать его, вам придется его купить)
• Я думаю, что было бы лучше использовать margin или padding для relative позиционированных элементов. вместо расстояния top, использованного в #mission-statement-body. Кроме того, с ними вам не нужно устанавливать position

Надеюсь, что это помогло