Margin between my boxes CSS - html

Question

I have those 3 boxes
and I want to have some margin inbetween them. As soon as I add margin, the 3rd one goes to the next row. Here's the 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;
}
If I add
.marginyes {
margin: 0 30px;
}
The next row thing happens.
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>
I'm using bootstrap 3.
How could I solve this?

Answer 1

there is a solution.
change your DOM
old:
<div class="col-md-4 contenhotelsclass">
........
</div>
new:
<div class="col-md-4">
<div class="contenhotelsclass">
.....
</div>
</div>
add following css:
.contenhotelsclass {margin:0px 10px;}
jsFiddle http://jsfiddle.net/mp9napL3/1/

Answer 2

Firstly, I don't understand why you use margin: 0 30px;, I usually use just margin:30px;.
Secondly, the answer is that you have so much spacing between your boxes, your browser just puts the last box on the next line. Use a wider browser and your 3rd box won't go on the next line.

Answer 3

It is obvious, you are using col-md-4 means 25% of parent and when you set extra margin your div covers greater than 25%, the only way is to override col-md-4 class and reduce width from 25% to less.