Having these 3 boxes is causing some spacing issues that I need to address. Whenever I try to add margin, the third box shifts to the next row. Below is the snippet of code:
CSS:
#hotels {
background: url('../img/PICS/19427110_ml.jpg');
background-size: 100%;
height:10px;
color:whitesmoke;
}
.contenhotelsclass {
border-radius:10px;
padding: 70px;
height: 700px;
background: rgba(0, 0, 13, 0.6);
}
.contentsfirst {
padding-top: 100px;
padding-bottom: 100px;
}
Whenever I include
.marginyes {
margin: 0 30px;
}
The third box gets pushed to the next row.
HTML:
<section id="hotels">
<div class="row">
<div class="col-md-12 contentsfirst" id="contenthotels">
<div class="col-md-4 contenhotelsclass">
<img src="{{ URL::asset('img/PICS/18911510_ml.jpg') }}" class="img-circle img-responsive"> </img>
<span><h2>{{ Str::upper($wording['training']->container) }}</h2></span>
<span style="padding-top: 100px">{{ Str::limit($wording['training']->wording , 400, '...') }}</span>
<span ><p style="padding-top: 30px;"><button id="trainbutton" class="btn btn-success">Read more!</button></p></span>
</div>
<div class="col-md-4 contenhotelsclass marginyes">
<img src="{{ URL::asset('img/PICS/20360155_m.jpg') }}" class="img-circle img-responsive"> </img>
<span><h2>{{ Str::upper($wording['taste']->container) }}</h2></span>
<span style="padding-top: 100px">{{ Str::limit($wording['taste']->wording ,400,'...') }}</span>
<span><p style="padding-top: 30px;"><button id="eatbutton" class="btn btn-success">Read more!</button></p></span>
</div>
<div class="col-md-4 contenhotelsclass">
<img src="{{ URL::asset('img/PICS/31786072_ml.jpg') }}" class="img-circle img-responsive"> </img>
<span><h2>{{ Str::upper($wording['relax']->container) }}</h2></span>
<span style="padding-top: 100px">{{ Str::limit($wording['relax']->wording ,400,'...') }}</span>
<span><p style="padding-top: 30px;"><button id="relaxbutton" class="btn btn-success">Read more!</button></p></span>
</div>
</div>
</div>
</section>
Bootstrap 3 is the framework being used.
Any thoughts on how to resolve this issue?