title: Why is an element pushed out of view by background image?
body: <p>I'm making a horizontal scrolling site and encountering an issue where, when using flexbox, my content is pushed out of the page by my background image. Please see my pen:</p>
  
  <p><a href="https://codepen.io/anon/pen/NwgQmG" rel="nofollow noreferrer">https://codepen.io/anon/pen/NwgQmG</a></p>
  
  <p>I'm using three background images that each take up a full page's width and inline-block to create horizontal scrolling. </p>
  
  <p>In addition, I want to add flexbox so that I can create my own grid system on top of each background image. The problem is that when I add flexbox, I must use <code>position: absolute</code> on the first div below my background image so that the background image isn't pushed down to the bottom of the page.</p>
  
  <pre><code>&lt;div id="homeImg" class="background-image-full"&gt;
    &lt;div class="container row" style="position: absolute;"&gt;
      &lt;div class="container column"&gt;
        Hello There!
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then, when I attempt to add text to a container inside my grid system ("Hello There!"), the text does not show up. It's pushed to the upper left-hand corner, as indicated by inspect.</p>
  
  <p>How can I get my text to show up? Is there a better way to use flexbox where I don't have to also use absolute positioning?</p>
  
  <p>Thanks!</p>