How To Have A 100% Width Background Inside Container Of Twitter Bootstrap?

I am currently building a wordpress site, where I need a 100% width background (css color, no image) for a div. My div is inside a container and I can't modify the html. So, I was

Solution 1:

Based on this article from CSS Tricks (Full Width Browser Bars ).

HTML

<div class="container">
  <div class="level"></div>
  <div class="level purple"></div>
  <div class="level"></div>
</div>

CSS

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%;
}

Codepen Demo

Support should be IE8 & up