Gutter between divs

Answer 1

You can add this to your CSS and it should work (tested):

.bg-green {
  width: calc((100% - ((3 - 1)*2%))/(3/1));
  margin-right: 2%;
}

.bg-green:last-child{
  margin-right: 0;
}

Edited snippet:

.container{
  font-size: 0;
}
[class|="col"] {
    display:inline-block;
    vertical-align: top;
    position:relative;
    font-size:20px;

}
.col-1-3{
    width:calc(100%/(3/1));
}
.col-2-3{
    width:calc(100%/(3/2));
}
.col-1{
    width:100%;
}
.bg-blue{
    background-color:#42a5f5;
    color:#ffffff;
}
.bg-green{
    background-color:#66bb6a;
  color:#ffffff;
}

.bg-green {
  width: calc((100% - ((3 - 1)*2%))/(3/1));
  margin-right: 2%;
}

.bg-green:last-child{
  margin-right: 0;
}

  
blue left
    


    
green 1
        
green 2
        
green 3

  
    
blue right

Just replace "3" with whatever numbers of columns you have and change the margin-right value as you like.

Version with negative margin

Change markup a little bit (similar structure to Bootstrap):

  
green 1


  
green 2


  
green 3

And following part in CSS

.children-has-gutters > div {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.bg-blue {
    background-color:#42a5f5;
    color:#ffffff;
    width:calc((100%/(3/1)) + 15px);
}

.container{
  font-size: 0;
}
[class|="col"] {
    display:inline-block;
    vertical-align: top;
    position:relative;
    font-size:20px;

}
.col-1-3{
	width:calc(100%/(3/1));
}
.col-2-3{
	width:calc(100%/(3/2));
}
.col-1{
	width:100%;
}

.children-has-gutters{
  margin-left:-15px;
  margin-right:-15px;
  width: calc((100% / (3/1)) + 30px);
}
.children-has-gutters > div{
  padding-left:15px;
  padding-right:15px;
  box-sizing: border-box;
}


.bg-blue{
	background-color:#42a5f5;
	color:#ffffff;
}
.bg-green{
	background-color:#66bb6a;
    color:#ffffff;
}

  
blue left
	

    
    

      
green 1
    
    

      
green 2
    
    

      
green 3
    
      
  
	
blue right

Note that you had to add 15px to each blue column, to avoid issue with container width. You can play around and check what happens without it - width of elements in container would be 100% - 30px (negative margin).