title: Full width background inside Bootstrap container on Safari
body: <p>I found a post here where the same question was asked before. I implemented the solution suggested there and it works fine with Chrome and Firefox. But when I tested it on Safari and Opera, I ended up with a long horizontal scrollbar. I'm not sure how to fix it since I've already added <code>using overflow-x: hidden</code> to the body. You can see it in action <a href="http://www.kampuster.com" rel="nofollow noreferrer">here</a>.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="level"&gt;&lt;/div&gt;
    &lt;div class="level purple"&gt;&lt;/div&gt;
    &lt;div class="level"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>html, body {
      overflow-x: hidden;
  }
  .container {
    width:960px;
    margin: 0  auto;
    border:1px solid black;
  }
  .level {
    height:100px;
    background: #bada55;
  }
  
  .purple {
    position: relative;
    background: #663399;
  }
  
  .purple:before, 
  .purple:after {
    content: "";
    position: absolute;
    background: #663399;  /* Match the background */
    top: 0;
    bottom: 0;
    width: 9999px;   /* some huge width */
  } 
  .purple:before {
    right: 100%; 
  }
  .purple:after {
    left: 100%;
  }
  </code></pre>