Remove Container Sides - html

Question

I'm having problems styling my page and I'm not sure what to do.
The issue I'm running into is that the container class in Bootstrap has a sizable amount of padding on each side, but I can't seem to reliably remove it. I want the red background to be flush against the grey image, and have blue in the background. The only way I've been able to work around this is by using the CSS property background-clip: content-box but then I begin to run into issues when I start adding things like box-shadows.
This is what I have right now:
This is what I want to have:
Here is my 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/

Answer 1

col-* has a default padding of 15px on both, right side and left side.
So, if you want to remove the padding, simply use this in your css:
.removePaddingRightLeft {
padding-right: 0;
padding-left: 0;
}
And your html:
<div class="col-md-12 removePaddingRightLeft">
<img class="img-responsive" src="http://placehold.it/1140x360"/>
</div>
Updated fiddle