Bootstrap 3 Grid Layout not respecting blank "Margin" columns? - html

Question

I am looking for the following grid layout using bootstrap grid system:
[M2][G2][M1][G2][M1][G2][M2]
[M2][T2][M1][T2][M1][T2][M2]
[M2][T2][M1][T2][M1][T2][M2]
Sorry it's quite busy, basically you have a 3 x 3 grid, with a Glyphicon, Title box and then text box going down (there are 3 of these going across). These have margin blocks [M2] either side, representing two blocks and [M1] blocks in between each element. This is generated by the code below, however, after the Glyphicon line, there is a <div class="col-sm-3 margin"></div> which should fill up the whole line, so that I can then start on the next line. This should only take 2 blocks, but I have had to use 3, as otherwise the grid seems to ignore it? This makes the grid overflow to the next row, in which case the Text element is one grid too far, why does a 2 column block followed by another two column block not fill the first line and then indent the next row by two columns? Below is the part od the code showing the first 4 elements + their margin blocks, JSFiddle is a JSFiddle of the full code with working demo of the problem.
<div class="container-fluid PageView text-center">
<div class="row Page2">
<div class="col-sm-2 margin"></div>
<div class="col-sm-2 col-xs-2">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-bullhorn glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-1 margin"></div>
<div class="col-sm-2 col-xs-2">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-ok glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-1 margin"></div>
<div class="col-sm-2 col-xs-2">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-phone glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-3 margin"></div>
<div class="col-sm-2 margin"></div>
<div class="col-sm-2">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>Title 1</strong></h2>
</div>
<div class="col-xs-6 col-sm-1">
<p class="lead">Text 1</p>
</div>
</div>
</div>
</div>
<div class="col-sm-1 margin"></div>
Update
JSFiddle

Answer 1

Added a height to the margin class and also added the missing margin after text 2 (center) block
.margin {
height: 20px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid PageView text-center">
<div class="row Page2">
<div class="col-sm-2 margin"></div>
<div class="col-sm-2 col-xs-2">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-bullhorn glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-1 margin"></div>
<div class="col-sm-2 col-xs-2">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-ok glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-1 margin"></div>
<div class="col-sm-2 col-xs-2">
<div class="glyphicon-ring"> <span class="glyphicon glyphicon-phone glyphicon-bordered"></span>
</div>
</div>
<div class="col-sm-2 margin"></div>
<div class="col-sm-2 margin"></div>
<div class="col-sm-2">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>Title 1</strong></h2>
</div>
<div class="col-xs-6 col-sm-12 eqheight1">
<p class="lead">Text 1</p>
</div>
</div>
</div>
</div>
<div class="col-sm-1 margin"></div>
<div class="col-sm-2">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>Title 2</strong></h2>
</div>
<div class="col-xs-6 col-sm-12 eqheight2">
<p class="lead">Text 2</p>
</div>
</div>
</div>
</div>
<div class="col-sm-1 margin"></div>
<div class="col-sm-2">
<div class="box">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h2><strong>Title 3</strong></h2>
</div>
<div class="col-xs-6 col-sm-12 eqheight3">
<p class="lead">Text 3</p>
</div>
</div>
</div>
</div>
</div>
</div>