Unable to get all columns on same on row - html

Question

I am using Bootstrap and trying to center 3 div blocks using the bootstrap 12 columns style. So each div takes up 4 columns. I want some spacing between these columns thus I added 10px margin to the right. This pushes down the 3rd div to the next row. How do I get my spacing and still keep all 3 columns on the same row?
HTML
<div class="container">
<div class="form-group col-sm-4 col-lg-4 cust_box">
<h3>Something</h3>
</div>
<div class="form-group col-sm-4 col-lg-4 cust_box">
<h3>Something</h3>
</div>
<div class="form-group col-sm-4 col-lg-4 cust_box">
<h3>Something</h3>
</div>
</div>
CSS
.cust_box{
margin-top: 15px;
margin-bottom:15px;
padding-left: 10px;
padding-right:10px;
background-color: #1A284B;
color: #fff;
height: 290px;
max-width:100%;
border: 1px solid #162444;
margin-right: 10px; /*Line that causes issue*/
}
Problem recreated in CodePen

Answer 1

Place your class cust_box inside the the column. The h3 has margin so that may also be interfering with your layout. You may also want to just use the row class instead of form-group.
See working Example Snippet. (colors added so you can see what's actually happening)
.cust_box {
margin: 15px 2.5px;
padding: 25px;
height: 290px;
max-width: 100%;
background-color: #1A284B;
color: #fff;
border: 1px solid #162444;
}
.cust_box h3 {
margin: 0;
}
.red {
border: 2px solid red;
}
.yellow {
background: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row yellow">
<div class="col-sm-4 red">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
<div class="col-sm-4 red">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
<div class="col-sm-4 red">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
</div>
</div>
Example without Color
.cust_box {
margin: 15px 2.5px;
padding: 25px;
height: 290px;
max-width: 100%;
background-color: #1A284B;
color: #fff;
border: 1px solid #162444;
}
.cust_box h3 {
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
<div class="col-sm-4">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
<div class="col-sm-4">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
</div>
</div>

Answer 2

with the additional margin you are destroying the bootstrap grid system.
have you tried using padding instead of margin?
apart from this you can customize bootrap a lot!
have a look on this:
http://getbootstrap.com/customize/#grid-system
EDIT:
i looked at your code and saw your struggle:
use a inner div like this:
<div class="form-group col-sm-4 col-lg-4 cust_box">
<div class="inner">
<h3>Something</h3>
</div>
</div>
and use your style on the inner div:
.cust_box .inner{
margin-top: 15px;
margin-bottom:15px;
padding-left: 10px;
padding-right:10px;
background-color: #1A284B;
color: #fff;
height: 290px;
max-width:100%;
border: 1px solid #162444;
margin-right: 10px; /*should not be an issue anymore*/
}