If you are working with the bootstrap framework, it may be necessary to customize certain properties of standard classes. One approach is to primarily utilize the grid system to avoid extensive modifications. For instance, if you prefer a fluid layout without fixed widths, you can employ the container-fluid class. I have created a fiddle that addresses this issue. However, please be aware that in the process, I have overridden some default Bootstrap CSS, which is not typically recommended but could serve as a temporary solution. Hopefully this provides some assistance.
Explore more on Container Fluid: Bootstrap Container Fluid
Fiddle for Reference: Allora - CSS Fix
HTML Adjustments:
<div class="jumbotron">
<h1>Enjoy Shopping With Pampers!</h1>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-4">
<h3><span class="glyphicon glyphicon-time"></span></h3>
<h4>Thursday 12:30</h4>
</div>
<div class="col-xs-4">
<h3><span class="glyphicon glyphicon-map-marker icon-white"></span></h3>
<h4>Kanyon</h4>
</div>
<div class="col-xs-4">
<h3><span class="glyphicon glyphicon-user"></span></h3>
<h4>6 People</h4>
</div>
</div>
</div>
</div>
CSS Modifications:
.jumbotron{
position: relative;
padding:0 !important;
margin-top:70px !important;
background:#eee;
margin-top:23px;
text-align:center;
margin-bottom:0 !important;
}
.container-fluid{
padding:0 !important;
}
.col-xs-4{
background:rgba(157,52,99,0.7);
}