title: CSS X Overflow Leaves White Space
body: <p>I'm currently creating an online portfolio and am attempting to use parallax CSS for nice scrolling effects. I have a class which applies certain styles and formatting to divs which are the different sections.</p>
  
  <p>Long story short, to avoid the overflow of the parallax making the page too wide, I am hiding the x overflow so it is shortened to the viewport width. However, this leaves some whitespace on the left side of the screen which is really annoying.</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>* {
    padding: 0;
    margin: 0;
  }
  
  body {
    font: 100% / 1.5;
  }
  
  #homeSplash {
    background-image: url(https://cdn-images-1.medium.com/max/1600/0*WW-iV1yoPWqUcd5H.);
    background-size: cover;
    color: white;
    text-align: center;
  }
  
  #title {
    background: rgba(255, 255, 255, 0.75);
    padding: 50px;
    font-family: 'Ubuntu Condensed', sans-serif;
  }
  
  #title h3,
  h4,
  h1 {
    padding: 10px;
  }
  
  .parallax {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-perspective: 300px;
    perspective: 300px;
    font-size: 200%;
  }
  
  .parallax__group {
    position: relative;
    height: 500px;
    /* fallback for older browsers */
    height: 100vh;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  
  .parallax__layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  
  .parallax__layer--fore {
    -webkit-transform: translateZ(90px) scale(.7);
    transform: translateZ(90px) scale(.7);
    z-index: 1;
  }
  
  .parallax__layer--base {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 4;
  }
  
  .parallax__layer--back {
    -webkit-transform: translateZ(-300px) scale(2);
    transform: translateZ(-300px) scale(2);
    z-index: 3;
  }
  
  #group2 {
    z-index: 3;
  }
  
  .title {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parallax"&gt;
    &lt;div id="group2" class="parallax__group"&gt;
      &lt;div class="parallax__layer parallax__layer--base"&gt;
        &lt;div class="title"&gt;
          &lt;div id="title"&gt;
            &lt;h1&gt;Welcome&lt;/h1&gt;
            &lt;h3&gt;I am Luca Passariello&lt;/h3&gt;
            &lt;h4&gt;Welcome to my Portfolio&lt;/h4&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="homeSplash" class="parallax__layer parallax__layer--back"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've tried to use <code>width: 100vw</code> which did nothing to help the problem. Any help would be greatly appreciated.</p>
  
  <p>Note - The live site is <a href="http://www.lucapassariello.co.uk" rel="nofollow noreferrer">here</a></p>