[html] Bootstrap 3 hidden-xs makes row narrower

I'm experimenting with Bootstrap 3 responsive grids and am trying to make a column disappear from a row when the screen size is small. I can get the column to disappear but the whole row seems to get narrower as a result.

Here's my code that is giving me grief:

<div class="container">
 <div class="row">
  <div class="col-xs-4 col-sm-2 col-md-1" align="center">
   Col1
  </div>
  <div class="col-xs-4 col-sm-2" align="center">
   Col2
  </div>
  <div class="col-xs-12 hidden-xs col-sm-6 col-md-5" align="center">
   Col3
  </div>
  <div class="col-xs-12 hidden-xs col-sm-12 hidden-sm col-md-3 " align="center">
   Col4
  </div>
  <div class="col-xs-4 col-sm-2 col-md-1" align="center">
   Col5
  </div>
 </div>
</div>

The columns Col4 and then Col3 disappear as the screen gets smaller but the row gets narrower at each removal (when compared to a header row row that doesn't change). I don't get why as I've made sure all the blocks add up to a width of 12 for each stage of the process. I though that maybe the col-xs-12 was the problem but removing this stops the column being removed at all and puts the removed column in with Col5!

I'm obviously missing 'something' but I can't find anything anywhere to help me - hopefully I will find enlightenment here.

.row {
    margin-right: 15px;
}

throw this in your CSS