title: How do I properly keep my HTML elements contained in its parent view?
body: <p>My webpage is divided into sections, each of which have an h1 headline. I have positioned the text at the top of each section where I see fit, however when I scale the window/screen size to a certain point, the text floats up and over laps the pervious section, like so:</p>
  
  <p><strong>BEFORE SCALE BREAKING POINT</strong></p>
  
  <p><a href="https://i.stack.imgur.com/TiGgv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TiGgv.png" alt="enter image description here"></a></p>
  
  <p><strong>AFTER SCALE BREAKING POINT</strong></p>
  
  <p><a href="https://i.stack.imgur.com/jd7BV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jd7BV.png" alt="enter image description here"></a></p>
  
  <p>As you can see the text floats up to the pervious section after a certain scale point. Here is my HTML:</p>
  
  <pre><code>    &lt;body&gt;
        &lt;div class="first-section"&gt;
          &lt;h1&gt;
            Dark,Darker,Darkest... Darker than Darkest... Darkest-est, whatever you get the point.
          &lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="second-section"&gt;
          &lt;h1&gt;
            You must be looking at this guy, really weirded out... Well   guess what, so is he.
          &lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="third-section"&gt;
  
        &lt;/div&gt;
        &lt;div class="fourth-section"&gt;
  
        &lt;/div&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre><code>/* Sections */
  
  .first-section {
    position: relative;
    height: 100vh;
    background-color: #6666FF;
    background-image: url(https://s3-us-west-2.amazonaws.com/assets/hallway.jpg);
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-shadow: 0 1px 3px rgba(0,0,0,.8);
    text-align: center;
    position:relative;
  }
  .first-section h1 {
    position: relative;
    color: #FFD700;
    font-size : 6vw;
    margin: auto;
    top: -200px;
  
  }
  .second-section {
    position: relative;
    height: 100vh;
    background-color: honeydew;
    background-image: url(https://s3-us-west-2.amazonaws.com/assets/awe.jpg);
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-shadow: 0 1px 3px rgba(0,0,0,.8);
    text-align: center;
    position:relative;
  }
  .second-section h1 {
    position: relative;
    color: #FFD700;
    font-size : 6vw;
    margin: auto;
    top: -200px;
  }
  </code></pre>
  
  <p>How do I stop the text from floating up out its parent section?</p>