title: Text only appears on top of webpage
body: <p>I can't get my text to follow the flow of the website. It only appears on the top left of my webpage</p>
  
  <p>I have tried using different positioning the the elements</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>* {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    font-family: Arial;
    font-size: 17px;
  }
  
  #backgroundVideo {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(#);
    background-size: cover;
  }
  
  .background-vid-content {
    position: fixed;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    padding: 20px;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;video autoplay muted loop poster="#" id="backgroundVideo"&gt;
                  &lt;source src="videos/How%20To%20Cook%20A%20Cheap%20Steak%20Vs.%20An%20Expensive%20Steak%20(1).mp4" type="video/mp4"&gt;
              &lt;/video&gt;
  &lt;div class="background-vid-content"&gt;
    &lt;h1&gt;Flavor&lt;/h1&gt;
    &lt;p&gt;lorem ipsumLorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique
      delicatissimi pro.&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want the text to appear under the video, but it appears on the top left</p>