Columns in row in bootstrap are not filling page width - css

Question

I have a section of a website that has 2 rows inside a container, both rows have 3 columns of class col-sm-4 and col-md-4. Both rows have 1 image in each column. All images are exactly the same size at 300px wide. The top row displays accurately, the bottom row condenses the 3 columns and leave a big area of wide space on the right side. When using the inspector, The top row columns are appearing as class col-md-4, but the buttom row columns are showing as col-sm-4. I'm not sure if this is whats causing it. I should mention also that the top row columns have paragraphs below each image. When adding the exact same paragraph content to the bottom row in just 1 column, the issue is resolved, but I don't want paragraphs here. I checked out the bootstrap CSS and my own to try and find some sore of style on <p> that could be causing this but couldn't find anything. Each row, and column have the exact same CSS. The code is below:
HTML:
<div class="wrapper">
<div class="row customer-options">
<div class="button-container">
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="images/button-icon-map2.png" alt="">
<h2>Title 1</h2>
<p>These marketing boxes are a great place to put some information. These can contain summaries of what the company does, promotional information, or anything else that is relevant to the company. These will usually be below-the-fold.</p>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="images/button-icon-pref2.png" alt="">
<h2>Title 2</h2>
<p>The images are set to be circular and responsive. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="images/button-icon-add2.png" alt="">
<h2>Title 3</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
</div>
</div>
</div><!-- /.row -->
</div><!--wrapper-->
<hr>
<div class="wrapper">
<div class="row tap">
<div class="tap-container">
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="images/beer-tap.png" alt="">
<h2>About</h2>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="images/beer-tap.png" alt="">
<h2>Services</h2>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="images/beer-tap.png" alt="">
<h2>Contact</h2>
</div>
</div>
</div><!-- /.row -->
</div><!--wrapper-->
CSS:
.wrapper {
display: table;
}
.button-container {
padding-right: 15px;
padding-left: 15px;
}
.customer-options {
background-color: #848487;
padding-top: 20px;
height:100vh;
display: table-cell;
vertical-align: middle;
}
.tap {
background-color: #848487;
padding-top: 20px;
height:100vh;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.tap-container {
padding-right: 15px;
padding-left: 15px;
}
.customer-options h2 {
text-align: center;
}

Answer 1

The display table and table-cell are taking precedence over the responsive image. Tables fit their content then the img-responsive will fill the new width. You can probably find a work around to achieve vertical alignment but I recommend dropping the table system and properly use bootstrap's grid system. Then you can use flexboxes to get vertical alignment.
http://jsfiddle.net/28qq8fm3/
<style>
.customer-options {
background-color: #848487;
padding-top: 20px;
vertical-align: middle;
}
.tap {
background-color: #848487;
padding-top: 20px;
vertical-align: middle;
text-align: center;
}
.customer-options h2 {
text-align: center;
}
</style>
<div>
<div class="row customer-options">
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="https://beccasheppard.files.wordpress.com/2011/09/football.jpg" alt="">
<h2>Title 1</h2>
<p>These marketing boxes are a great place to put some information. These can contain summaries of what the company does, promotional information, or anything else that is relevant to the company. These will usually be below-the-fold.</p>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="https://beccasheppard.files.wordpress.com/2011/09/football.jpg" alt="">
<h2>Title 2</h2>
<p>The images are set to be circular and responsive. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="https://beccasheppard.files.wordpress.com/2011/09/football.jpg" alt="">
<h2>Title 3</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
</div>
</div>
<!-- /.row -->
</div>
<!--wrapper-->
<hr>
<div>
<div class="row tap">
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="http://www.cozadschools.net/wp-content/uploads/2015/02/football.png" alt="">
<h2>About</h2>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="http://www.cozadschools.net/wp-content/uploads/2015/02/football.png" alt="">
<h2>Services</h2>
</div>
<div class="col-sm-4 col-md-4">
<img class="img-circle img-responsive img-center" src="http://www.cozadschools.net/wp-content/uploads/2015/02/football.png" alt="">
<h2>Contact</h2>
</div>
</div>
<!-- /.row -->
</div>
<!--wrapper-->