Bootstrap: add spacing between columns

I am new to bootstrap and am trying to figure out how to put spacing in between boxes in second row-fluid in a container-fluid. I am trying to use the class="col-lg-4 col-md-6 item col-xs-12" so my page will have three columns on larger screens, two columns on tablets, and one column on mobile devices.

I have developed the following bootply to demonstrate where I am getting stuck:

bootply example

This example has two rows and I want to add spacing betwen the col1, col2, col3 boxes.

I have tried adding a margin-left= 4px; to the #col1 css but that seems to make the col3 get stuck below col1.

I'd like to suggest one more solution.

Make additional div inside each #col1:

    <div class="container-fluid">
  <div class="row-fluid">
    <div id="start" class="span12">

        Line1<br>
        Line2<br>
    </div>
  </div>
  <div calss="row-fluid">
    <div class="col1 col-lg-4 col-md-6 item col-xs-12"><div class="col-inside"> Col1 </div></div>
    <div class="col1 col-lg-4 col-md-6 item col-xs-12"><div class="col-inside"> Col2 </div></div>
    <div class="col1 col-lg-4 col-md-6 item col-xs-12"><div class="col-inside"> Col3 </div></div>
  </div>

and add col1's childs styles to your css

#start {
  background-color: #f1f2f6;
  margin-bottom:8px;
}

.col1 {
  background-color: #f1f2f6;
  margin-bottom: 4px;
}

.col-inside {
  border: solid 2px #000000;

}
.col1:first-child {
  padding: 0 4px 0 0;
}
.col1:nth-child(2) {
  padding: 0 4px;
}
.col1:last-child {
  padding: 0 0 0 4px;
}

It makes right margin 4px and 0px for left one in first column, left margin 4px in last column, and right and left margins 4px in middle column only if there are 3 columns. Here is bootply link