Content overflowing / overlapping flex items on smaller screens
<p>I'm using flexbox and I set each section's height to 100vh.</p>

<p>Whenever, I resize the window, the text from the first section and the last section overflow to the other sections. </p>

<pre><code>.banner, #showcase  {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container, .banner {
    width: 100%;
    height: 100vh;
}
</code></pre>

<p><a href="http://codepen.io/mrfishball/pen/oLgLxX" rel="nofollow">http://codepen.io/mrfishball/pen/oLgLxX</a></p>