Bobr_10

<header class="header">
  <div class="header__logo">logo</div>
  <div class="header__controlls">
    <nav class="nav header__nav">
      <ul class="nav__list">
        ...
        <li class="nav__list-item">nav item</li>
      </ul>
    </nav>
    <div class="header__buttons">
      <button class="button">Войти</button>
      <button class="button button--primary">Зарегистрироваться</button>
    </div>
  </div>
</header>

С версткой все норм. Получше чем у многих. А вот CSS сразу насторожил:

* {
    margin: 0;
    padding: 0;
}

Нельзя так делать. Вместо такого топорного сброса отступов для всех элементов. Лучше использовать нормалайзер:
https://necolas.github.io/normalize.css/

И еще, адаптив нужно делать наоборот. Вначале под мобилы, потом под что по больше. Гуглите mobile-first

Потому-что это ВНЕШНИЙ отступ. Отступ от одного элемента до другого. В вашем случае у элемента header(условно) свой background серого цвета, а у следующего section черного. Решение 1 - background-color: black для body и дальше переопределение стилей по каскаду. Вариант 2 - padding-top для заголовка во втором блоке.

https://codepen.io/Olovyannikov/pen/xxGNrve

Почитай про схлопывание марджинов.
UPD уточню, какому блоку задаешь отступ родителю или заголовку?