Bootstrap creates some sort of margin - html

Question

When using bootstrap to build the base of a website it creates some weird black, the black color is the body's color, margin on the right side of the header.
HTML:
<section id="header">
<div class="row">
<div class="content-wrapper">
<div class="col-md-6">
<div class="left">
<img src="#" alt="">
</div>
</div>
<div class="col-md-6">
<div class="right">
<nav>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</section>
<section id="featured">
<div class="row">
<div class="col-md-4 box yellow">
</div>
<div class="col-md-4 box blue">
</div>
<div class="col-md-4 box red">
</div>
</div>
<div class="row">
<div class="col-md-4 box green">
</div>
<div class="col-md-4 box gray">
</div>
<div class="col-md-4 box white">
</div>
</div>
</section>
CSS:
body {
background: #000;
}
.content-wrapper {
max-width: 1100px;
margin: 0 auto;
}
.left {
float: left;
}
.right {
float: right;
}
section#header {
background: white;
height: 150px;
}
nav ul li {
display: inline-block;
}
.yellow {
background: yellow;
}
.red {
background: red;
}
.blue {
background: blue;
}
.green {
background: green;
}
.gray {
background: gray;
}
.white {
background: white;
}
.box {
height: 250px;
}
Here's a jsfiddle: http://jsfiddle.net/awu2cp6a/

Answer 1

The black on the right side is the background color.
The reason you only see it there is, because .row has margin-left/right: 15px;. If you remove/overwrite this to 0px, the black disappears or you add the row class to the element with the image.
EDIT
So if you would have an image, it would be OVER the black area, but because there is no image that fits in the full size, it's not displaying. Have you tryed give your section the row class?