Remove white gap spaces in the left and right sides - html

Question

I have a bootstrap's panel-based web page made using bootstrap's grid system. The problema is, I have those extra spaces in the left and right side of the divs. Basically the contents are on the center. How do I remove this?
I tried using margin-top, margin-left, margin-right, bootstrap's pull-left and pull-right, margin and padding set to 0, width:100% etc nothing worked.
Here's a picture:
Look at the left and right sides, thise the white spaces i'm trying to remove. I don't know if this is something wrong with my CSS or my bad use of framework (I'm new to it) or some bootstrap's standard behavior that I'm not aware of. But I'd like to what's this and know how to remove this.
Here's my HTML (this is the full HTML of above image except with the master page's HTML of course):
<div class="row">
<div class="col-md-6">
<br />
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class = "panel-title">JUST HAPPEND, YOU KNOW</h3>
</div>
<div class="panel-body">
<p />
<span class="date">15.40</span> CONTENTS GOES HERE... <p />
<span class="date">15.40</span> CONTENTS GOES HERE... <p />
<span class="date">15.40</span> CONTENTS GOES HERE... <p />
<span class="date">15.40</span> CONTENTS GOES HERE... <p />
<input class='btn btn-success' type='submit' value="LET ME READ ALL THAT" title="READ MORE...">
</div>
</div>
</div>
<div class="col-md-6">
<div class = "panel panel-primary">
<div class = "panel-heading">
<h3 class = "panel-title">LAST NEWS</h3>
</div>
<div class = "panel-body">
<p />
MORE CONTENTS GOES HERE
</div>
</div>
</div>
<div class="col-md-6">
<div class = "panel panel-primary">
<div class = "panel-heading">
<h3 class = "panel-title">VIDEOS</h3>
</div>
<div class = "panel-body">
<div class="vid">
<iframe width="420" height="315"
src="https://www.youtube.com/embed/yWP6Qki8mWc?cc_load_policy=1"
frameborder="0" allowfullscreen=""
></iframe>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-primary">
<div class = "panel-heading">
<h3 class = "panel-title">MAY I HELP YOU?</h3>
</div>
<div class = "panel-body">
HELLO
</div>
</div>
</div>
<div class="col-md-8">
<div class="panel panel-primary">
<div class = "panel-heading">
<h3 class="panel-title">THE LIFE</h3>
</div>
<div class = "panel-body">
<div class="row">
<div id="links">
<div class="col-md-4">
<a href="http://4.bp.blogspot.com/-Piugr0fCCpE/UZLhWealhpI/AAAAAAAACUU/UzB5PWn__oA/s1600/passaros0031.jpg" title="Image 1" data-gallery>
<img src="http://4.bp.blogspot.com/-Piugr0fCCpE/UZLhWealhpI/AAAAAAAACUU/UzB5PWn__oA/s1600/passaros0031.jpg" alt="Image 1" class="img-responsive">
</a>
</div>
<div class="col-md-4">
<a href="http://2.bp.blogspot.com/-uk7UKQdsN5c/T_iX9EUDmuI/AAAAAAAABeA/4jpV4UmZjrM/s1600/passaros.jpg" title="Image 2" data-gallery>
<img src="http://2.bp.blogspot.com/-uk7UKQdsN5c/T_iX9EUDmuI/AAAAAAAABeA/4jpV4UmZjrM/s1600/passaros.jpg" alt="Image 2" class="img-responsive">
</a>
</div>
<div class="col-md-4">
<a href="http://1.bp.blogspot.com/_sz2fJjO1XW8/TIwpeTIHrcI/AAAAAAAAE7I/z9fD9BTwWyA/s1600/passaro_001.jpg" title="Image 3" data-gallery>
<img src="http://1.bp.blogspot.com/_sz2fJjO1XW8/TIwpeTIHrcI/AAAAAAAAE7I/z9fD9BTwWyA/s1600/passaro_001.jpg" alt="Image 3" class="img-responsive">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<br /> <br />
<div class="col-md-8">
<div class="row">
<div class="col-md-4">
AAAAAAA
</div>
<div class="col-md-4">
BBBBBBB
</div>
<div class="col-md-4">
CCCCCCC
</div>
</div>
</div>
</div>

Answer 1

I'm assuming that you're trying to make your page full-width, rather than 1170px wide and centered, which is what the .container bootstrap class does. If that is the case, all you need to do is replace .container with .container-fluid:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
foo, bar, foobar
</div>
</div>
</div>
As I don't see any .container declarations in your excerpt, the changes should occur in your master page. Also remember that the number of columns per each .row should always amount to 12 (2 x .col-md-6, 3 x .col-md-4, etc).
CodePen

Answer 2

I found the problem: in bootstrap there is a rule
.container {
width: 1170px;
}
This causes the white gaps. To remove it, simply add width:100% to body-content in site.css
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
width:100%; //ADD THIS
}
Here is the proof: codepen