html - Remove Container Sides -

i'm having problems styling page , i'm not sure do.

the issue i'm running container class in bootstrap has sizable amount of padding on each side, can't seem reliably remove it. want red background flush against grey image, , have blue in background. way i've been able work around using css property background-clip: content-box begin run issues when start adding things box-shadows.

this have right now:

this want have:

here code:

<div class="container content-color">     <div class="row">         <div class="col-md-12">             <img class="img-responsive" src="http://placehold.it/1140x360">         </div>     </div>     <div class="row">         <div class="col-md-4">             <div class="circle center-block"></div>         </div>         <div class="col-md-4">             <div class="circle center-block"></div>         </div>         <div class="col-md-4">             <div class="circle center-block"></div>         </div>     </div> </div>   .circle {     background-color: #48c1b0;     height: 150px;     width: 150px;     border-radius: 50%; } body {     background-color: blue; } .content-color {     background-color: red; } } 

js fiddle: http://jsfiddle.net/rxvk0w2n/

col-* has default padding of 15px on both, right side , left side.

so, if want remove padding, use in css:

.removepaddingrightleft {     padding-right: 0;     padding-left: 0; } 

and html:

<div class="col-md-12 removepaddingrightleft">     <img class="img-responsive" src="http://placehold.it/1140x360"/> </div> 

updated fiddle