title: css overlay right side is cut off
body: <p>I am inserting an overlay div with width 100%, but the overlay div is not rendered completely. For some reason, it looks as if it has moved rightward.</p>
  
  <p>Here is <a href="https://jsfiddle.net/d6src0wf/3/" rel="nofollow">fiddle</a>. You can check that the padding on the right side does not show fully.</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div class='overlay'&gt;
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>.overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000000;
    background-color: rgba(255, 255, 255, 0.85);
    -webkit-transition: opacity .2s linear;
    transition: opacity .2s linear;
    padding: 20px;
  }
  </code></pre>