title: Horizontal and Vertical Center Divs with CSS, what am I doing wrong?
body: <p>I'm working on a website using bootstrap, and I'm trying to make the content in the header centered vertically and horizontally. I'm so close, but for some reason there's something extra pushing on the left, making it not centered and adding a horizontal scroll bar. I can't seem to figure out what it is. Thanks for your help!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.header {
    text-align: center;
    background: url(sunset-blue-darker.jpg) no-repeat center;
    height: 100vh;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
  }
  .center-both-ways {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .intro-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    padding: 20px;
    text-transform: none;
    font-weight: 400;
    color: #ff0000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;header class="header" id="header"&gt;
    &lt;!--header-start--&gt;
    &lt;div class="container"&gt;
      &lt;div class="center-both-ways"&gt;
        &lt;ul class="we-create animated fadeInUp delay-5s"&gt;
          &lt;h1&gt;HEADER&lt;/h1&gt;
        &lt;/ul&gt;
        &lt;ul class="we-create animated fadeInUp delay-1s"&gt;
          &lt;div class="col-xs-12 .col-sm-12 .col-lg-2 intro-text"&gt;
            &lt;p&gt;This is a
              &lt;br&gt;paragraph.&lt;/p&gt;
          &lt;/div&gt;
          &lt;!-- end bootsrap div --&gt;
        &lt;/ul&gt;
        &lt;!-- end transition effect --&gt;
      &lt;/div&gt;
      &lt;!-- end center-both-ways --&gt;
      &lt;div class="arrow"&gt;
      &lt;/div&gt;
      &lt;!-- end arrow --&gt;
    &lt;/div&gt;
    &lt;!-- close header --&gt;
  &lt;/header&gt;
  &lt;!--header-end--&gt;</code></pre>
  </div>
  </div>
  </p>