Gutter between divs

Answer 1

you may select the second div and reset width and margins:

.col-1-3:nth-child(2) {
  margin:0 1em;
    width:calc(100% / (3/1) - 2em);
}

.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));
}
/* here update to overwrite width and add margins rules */
.col-1-3:nth-child(2) {
  margin: 0 1em;/* whatever , double it before taking it off from width */
  width: calc(100% / (3/1) - 2em);
}
/* end update */
.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;
}

  
blue left
  

    
green 1
    
green 2
    
green 3
  
  
blue right

You may also want to take a look at display:flex :

.container{
  display:flex;
}
[class|="col"] {
    flex:1;/* flex children, spray them evenly */
    font-size:20px;
}
.container .container .col-1-3:nth-child(2) {/* select second containere on second level */
  margin:0 1em;
}
.bg-blue{
	background-color:#42a5f5;
	color:#ffffff;
}
.bg-green{
	background-color:#66bb6a;
  color:#ffffff;
}

  
blue left
	

    
    
green 1
		
green 2
		
green 3
      
  
	
blue right

Codepen to play with https://codepen.io/anon/pen/xEqQVg

edit

A third option, float + display:table, bg drawn via faux column . This means to put right and left column in front of the middle container.

.container{
	background-color:#42a5f5;
  margin:1em 0;
  text-align:center;
  font-size:20px;
  line-height:30px;
  text-shadow:0 0 1px gray;
}
.bg-blue {
  width:33%;/* whatever how many of those ? */
	background-color:#42a5f5;
	color:#ffffff;
}
.float-l {
  float:left;
  margin-right:-15px;/* cause of border-spacing */
}
.float-r {
  float:right;
  margin-left:-15px;/* cause of border-spacing */
}
.child-container {
  display:table;
  table-layout:fixed;/* suppose to spray cells evenly where no width is set to cells */
  background:linear-gradient(to left,#42a5f5 15px, transparent 15px),linear-gradient(to right,#42a5f5 15px, transparent 15px) white;/* reproduce blue bg part on white for both sides */
  width:calc(34% + 30px);
  margin:auto;
  border-spacing:15px 0;
}
.bg-green{
  display:table-cell;
	background-color:#66bb6a;
  color:#ffffff;
}

  
blue left
	
blue right
	
    
    
green 1
   
  


  
blue left
	
blue right
	
    
    
green 1
		
green 2
   
  


  
blue left
	
blue right
	
    
    
green 1
		
green 2
		
green 3
   
  


  
blue left
	
blue right
	
    
    
green 1
		
green 2
		
green 3
    
    
green 4
    
  

codepen https://codepen.io/anon/pen/qaAvjX