Gutter between DIVs using negative margin breaks - css

Question

I have the below code, which works fine. As you can see, it creates a gutter between the 3 green elements, which are children of the second out of three blue elements.
.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;
}
<div class="container">
<div class="col-1-3 bg-blue">blue left</div>
<div class="col-1-3 children-has-gutters" style="font-size:0px;">
<div class="col-1-3">
<div class="bg-green">green 1</div>
</div>
<div class="col-1-3">
<div class="bg-green">green 2</div>
</div>
<div class="col-1-3">
<div class="bg-green">green 3</div>
</div>
</div>
<div class="col-1-3 bg-blue">blue right</div>
</div>
In the below example, there is only one blue element, not three. And suddenly, the gutter between its green child elements doesnt work as expected. Sure, it has space in between, but it creates a horizontal scroller on the page, and the left most and right most side get the gutter as well, somehow seem like the negative margin doesnt work.
I would be grateful if someone could point out what breaks compared to the above code.
.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% + 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;
}
<div class="container">
<div class="col-1 bg-blue children-has-gutters" style="font-size:0px;">
<div class="col-1-3">
<div class="bg-green">green 1</div>
</div>
<div class="col-1-3">
<div class="bg-green">green 2</div>
</div>
<div class="col-1-3">
<div class="bg-green">green 3</div>
</div>
</div>
</div>
So, color wise it should go: left edge of screen, green 1, blue gap, green 2, blue gap, green 3, right edge of screen.
This is just an example, the number of children can change, so its not always 3.
This question is a follow up question to an old question of mine, as I now found this bug and cant figure out the problem:
old question here >>
Requirements: I dont want to add new div elements, and I dont want to change to flexbox.

Answer 1

It's an ugly hack, but you could put overflow hidden on your container to get rid of the blue on the edges:
.container{
font-size: 0;
overflow: hidden;
}

Answer 2

I just don't see any reason for the negative margins and the calc width for the class ...has-gutters what you can do is just add a padding-right except for the last-child
.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>div {
padding-right: 30px;
box-sizing: border-box;
}
.children-has-gutters>div:last-child {
padding-right:0;
}
.bg-blue {
background-color: #42a5f5;
color: #ffffff;
}
.bg-green {
background-color: #66bb6a;
color: #ffffff;
}
<div class="container">
<div class="col-1 bg-blue children-has-gutters" style="font-size:0px;">
<div class="col-1-3">
<div class="bg-green">green 1</div>
</div>
<div class="col-1-3">
<div class="bg-green">green 2</div>
</div>
<div class="col-1-3">
<div class="bg-green">green 3</div>
</div>
</div>
</div>