title: Why is setting the top-margin of this child element pushing its parent container down with it?
body: <p>I have two divs: </p>
  
  <pre><code>&lt;div id="headercontainer" data-type="background" data-speed="5"&gt; 
      &lt;div id="headersubcontainer"&gt;
          &lt;h1&gt;Simple and Cost Effective Web Solutions&lt;/h1&gt;  
      &lt;/div&gt; 
  &lt;/div&gt;
  
  &lt;div id="teamcontainer" data-type="background" data-speed="5"&gt; 
      &lt;div id="teamsubcontainer"&gt; 
          &lt;h1&gt;Developed by a dedicated team&lt;/h1&gt; 
      &lt;/div&gt; 
  &lt;/div&gt; 
  </code></pre>
  
  <p>both have 100% widths and heights of 800px. The first heading I have set a top-margin: of 160px. Instead of moving the header lower into its parent div, it moves the parent div down with it as you can see in this picture: </p>
  
  <p><img src="https://i.stack.imgur.com/mYznZ.png" alt="webpage"></p>
  
  <p>Here is my relevant css: </p>
  
  <pre><code>h1{
      font-size: 48px;
      font-family: $header-font-stack; 
      font-weight: 100;
      width: 400px;
  }
  
  #headercontainer{
      width: 100%; 
      height: 800px;
      background-image: image-url("background.jpg");
      background-position: center top;
      background-repeat: no-repeat;
  }
  
  #headercontainer h1{
      text-align: center;
      margin: 0px auto;
      margin-top: 160px;
      color: #610B21;
  }
  </code></pre>
  
  <p>Using a padding works obviously, but I would like to be more proper and use a margin. How can set a top margin and move the heading lower into the container without moving the container with it? </p>