title: Full width browser banner prevent IE horizontal scrolling
body: <p>Hi I have a banner which contained in a wrapper. The wrapper is not full width but the banner is.</p>
  
  <p>I wanted to prevent horizontal scrolling and achieved this in chrome by setting the body overflow-x:hidden. However when I check in IE11 you can still scroll to the right by clicking on the screen and dragging right.</p>
  
  <p>Does anyone know how to prevent this behaviour in IE?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #ccc;
    overflow-x:hidden;
    -ms-overflow-x:hidden;
  }
  
  section {
    box-sizing: border-box;
    /* or not */
    margin: 0 auto;
    width: 25rem;
    background: white;
    padding: 1.5rem;
  }
  
  .full-width {
    position: relative;
    /* child absolute */
    margin: 0 -9600rem;
    /* add back section padding value */
    padding: .25rem 9600rem;
    background: red;
    color: white;
    font-size: 1.125rem;
    z-index: 0;
  }
  
  .full-width:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    /* subtract h2 padding */
    left: 9598.5rem;
    right: 9598.5rem;
    background: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
    &lt;h2 class="full-width"&gt;Full-Width Bar&lt;/h2&gt;
    &lt;p&gt;Some content.&lt;/p&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>