title: Header not stretching across screen in CSS
body: <p>I'm having the craziest time trying to stretch my header across the screen. I have width set to 100%, but there's a huge gap on the left. </p>
  
  <p>It seems to be tied to the text in the middle of the screen, and when I do hit on something that stretches the header perfectly (like moving my "bg" class from <code>&lt;html&gt;</code> to <code>&lt;body&gt;</code>), suddenly the text below is slammed to the left.</p>
  
  <p>I just need the header 100% across the screen, and the text below it to be centered. Help!</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>/* http://meyerweb.com/eric/tools/css/reset/ 
     v2.0b1 | 201101 
     NOTE: WORK IN PROGRESS
     USE WITH CAUTION AND TEST WITH ABANDON */
  
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, figcaption, figure, 
  footer, header, hgroup, menu, nav, section, summary,
  time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
  }
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, 
  footer, header, hgroup, menu, nav, section {
   display: block;
  }
  body {
   line-height: 1;
  }
  ol, ul {
   list-style: none;
  }
  blockquote, q {
   quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
   content: '';
   content: none;
  }
  
  ins {
   text-decoration: none;
  }
  del {
   text-decoration: line-through;
  }
  
  table {
   border-collapse: collapse;
   border-spacing: 0;
  }
  
  /* MY CODE BEGINS BELOW */
  
  .header {
   display: flex;
   width: 100%;
   height: 150px;
   background-color: black;
   opacity: 0.8;
   position: absolute;
  }
  
  .bg {
    display: flex;
    display: -webkit-flex;
    background: black url(https://images.unsplash.com/photo-1465205568425-23fdd3805e49?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;s=7e476dbc9096ec1c869bd2cb97d82c70) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin: auto;
    padding: auto;
    width: 100%;
    justify-content: center;
  }
  
  .headline {
    display: flex;
    width: 100%;
    justify-content: center;
    margin: auto;
    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
  }
  
  .headline p {
    margin-top: 200px;
    background-color: transparent;
    color: white;
    font-family: 'Heebo', sans-serif;
    font-size: 50px;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html class="bg" lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
  
    &lt;title&gt;Hi&lt;/title&gt;
    &lt;meta name="description" content="Testing"&gt;
    &lt;meta name="author" content="Nate"&gt;
  
    &lt;link rel="stylesheet" href="style.css"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Heebo" rel="stylesheet"&gt;
  
    &lt;!--[if lt IE 9]&gt;
      &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="header"&gt;
   
  &lt;/div&gt;
  
  &lt;div class="headline"&gt;
   &lt;p&gt;Centered Text&lt;/p&gt;
  &lt;/div&gt;
  
   &lt;script src="js/scripts.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>