How to fix a 3x3 block of images with CSS - html

Question

I have a 3x3 block of images.
I want the images to be 400px wide and 300px in height.
I also want the images to stretch from edge to edge of the screen and for there to be no space between the images.
This is what it looks like at the moment
This is my current CSS and HTML:
.clear {
clear: both;
}
#grid {
width: 100%;
}
.grid-element {
width: 33.3333%;
height: 200px;
float: left;
}
<div id="grid">
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
</div>
<div class="clear">Example taken from grandoch's gist</div>

Answer 1

E. Updated the answer for use with Bootstrap.
Bootstrap adds left and right padding for all col-*-* elements, so you will merely need to remove that padding.
For full viewport width, you will need to use a fluid container, i.e. the container-fluid class.
#grid .grid-element {
height: 200px;
padding-left: 0px;
padding-right: 0px;
overflow: hidden;
}
img {
width: 100%;
height: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div id="grid" class="row">
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
</div>
</div>