title: How to prevent one section overlapping the other
body: <p>What I have seems to be a simple issue but I cant just wrap my head around it. I have googled around but all fixes for similar questions didn't help, which is why I'm asking for help here.</p>
  
  <p>I am building a landing page with several sections stacked on each other. Each section is set to occupy the full height of the view port, and all except one is set to take up 100% width of the screen too.</p>
  
  <p>However, when I reduce the screen height, the sections overlap each other. I have tried to set the overflow of each section to hidden, I still get the same behaviour. What I want is that each section be of fixed height as the browser height reduces and not get pushed into the upper section. Below is the snippet of my code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
      height: 100%;
      width: 100%;
      box-sizing: border-box;
  }
  .introd{
      height: 100vh;
      width: 100%;
      padding: 3rem 4rem;
      overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="introd"&gt;
      &lt;div class="introd_wrapper"&gt;
          &lt;h2 class="text-center"&gt;Introduction&lt;/h2&gt;
          &lt;div class="contents"&gt;
              some contents here
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>