My bootstrap grid container is not full width. See image:
The container is only the bit at the top.
here is the code:
HTML:
<div class="container" style="width:100%">
<div id="my-row" class="row" style="width:100%">
<div class="col-sm-4 panel" style="background-color: red">
<h4 class="white light" style="margin-top:0px; padding: 20px 0px 0px 20px; float: left;">WHAT WE GROW</h4>
</div>
<div class="col-sm-4 panel " style="background-color: yellow ">
</div>
<div class="col-sm-4 panel " style="background-color: blue ">
<h4 class="white light " style="margin-top:0px; padding: 20px 20px 0px 0px; float: right; color: pink; ">SIGN UP FREE</h4>
</div>
</div>
</div>
CSS:
#my-row {
display: table;
height:20%;
}
#my-row .panel {
float: none;
display: table-cell;
vertical-align: top;
}
How do I make the container go the full width?