I have a simple structure on BootStrap.
<div class="container">
<div class="row">
<div class="col-md-4 blue-section" ><p>Some content</p></div>
<div class="col-md-4 red-section"><p>Some content</p></div>
<div class="col-md-4 green-section"><p>Some Content</p></div>
</div>
</div>
The custom CSS file is as follows:
.container{ width:100%;}
.row{ background-color:#000;}
.blue-section{background-color:blue;}
.red-section{background-color:red;}
.green-section{background-color:green;}
When I resize the page and the columns stack on each other, there are gaps between them and an additional space after the last column with the same height as the previous gaps.
How can I remove these gaps? Are they in the .row or the .col-*-*?
Thank you.