Adding gutters in custom made gird without padding

Question

So I have been struggling with this situation.
The Markup

<div id="container">
        <div class="grid">
            <div class="col-1-4">
                <div class="module">
                    <h3>1/4</h3>
                </div>
            </div>
            <div class="col-1-2">
                <div class="module">
                    <h3>1/2</h3>
                </div>
            </div>
            <div class="col-1-4">
                <div class="module">
                    <h3>1/4</h3>
            </div>
         </div>
 </div>

The CSS

 *{
     box-sizing :  border-box;
 }
 [class *="col"]{
      float : left;
      height : auto;
      overflow: hidden;
 }
 .col-1-2{
      width : 50%;
 }

.col-1-4{
   width : 25%;
 }

#container{
    width : 960px;
    padding : 20px;
    margin : 10px auto 0 auto;
}

.module {
  padding: 20px;
  background: #eee;
  font-family: sans-serif; 
}

This makes columns appear side by side properly. But the ends collapse into one another and the whole thing appears like one big rectangle.

Now, I tried faking gutters by editing the existing CSS Style for [class*="col"] and adding padding-right : 20px to it

[class *="col"]{
    float : left;
    height : auto;
    overflow: hidden;
    padding-right : 20px;
}

Now everything looks like

I've managed to put in the gutters but if you look closely, the three grey rectangles are not centred inside the container div, they are more of pushed towards right.
How to tackle this situation ? It'd be really helpful if someone suggested a better method for adding gutters.
Thanks
(Blue highlights in the images suggest the actual sizes of columns)

Answer 1

You can add padding to left and right border of block

[class *="col"]{
    float : left;
    height : auto;
    overflow: hidden;
    padding : 0 10px;
}

and

#container{
    padding:10px;
}