Почему margin-top выталкивает родительский блок сверху вниз?

* {
  margin: 0;
  padding: 0;
}

.general {
  height: 6200px;
}

body {
  font-family: "Open Sans", sans-serif;
}

header {
  width: 100%;
  background-color: #000;
  height: 789px;
}

.header__logo {
  color: #fff;
  font-size: 24px;
  margin-top: 56px;
  margin-left: 12%;
}

.nav2 {
  margin-top: 56px;
  margin-left: 52.2%;
  color: red;
}

.nav_header {
  color: white;
}

.welcome_on_mycompany {
  margin-top: 195px;
  font-size: 44px;
  margin-left: 31.3%;
  color: white;
}

.mycompany {
  color: rgb(247, 171, 36);
}

.aboutUs {
  margin-top: 354px;
  font-size: 20px;
  color: white;
  margin-left: 29%;
}

.some_words {
  height: 612px;
  background-color: red;
}

.swau {
  margin-top: 134px;
  margin-left: 888px;
  color: red;
}

<div class="general">
  <header>
    <div class="header__logo">
      <p>mycompany</p>
    </div>
    <nav class="nav_header">
      <div class="nav2">
        <a href="">home</a><a href="">about</a><a href="">services</a><a href="">portfolio</a><a href="">testimonials</a><a href="">contact</a>
        <a href="" id="menu" class="icon">&#9776;</a>
      </div>
    </nav>
    <div class="welcome_on_mycompany">welcome on <span class="mycompany">mycompany</span></div>
    <div class="aboutUs">We are a digital agency with years of experience and with extraordinary people</div>
  </header>
  <main>
    <div class="some_words"><span class="swau">Some words about us</span></div>
  </main>
</div>