Bootstrap code design modfication - css

Question

Im using Bootstrap in my application. I am trying to make it so my whole left side is #fff, while rest is #f9f9f9.
This is what I have so far.
HTML:
<div class="container">
<section class="content">
<div class="col-xs-8">
// Left side
</div>
<div class="col-xs-4">
// Right side side-bar
</div>
</section>
</div>
CSS:
. container {
width: 1200px !important;
}
PS: I don't want/need responsive design.
Image below is a example for what I want to achieve.
Here is a link that hast the same design.

Answer 1

Please try the following code:
HTML
<div class="container">
<section class="content">
<div class="col-xs-8 left-side">
// Left side
</div>
<div class="col-xs-4 side-bar">
// Right side side-bar
</div>
</section>
</div>
CSS
.container{
margin: 0;
padding: 0;
width: 100%
}
.content{
height: 100%;
width: 100%;
}
.left-side{
background-color: #fff;
min-height: 100%;
}
.side-bar{
background-color: #f9f9f9;
min-height: 100%;
}
.no-margin{
margin: 0;
padding: 0
}

Answer 2

This would be a way to achieve what you want to do.
.leftside {
background: #fff;
}
.rightside {
background: #f9f9f9;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-8 leftside">
// Left side
</div>
<div class="col-xs-4 rightside">
// Right side side-bar
</div>
</div>
</div>