flexbox adding 1px left margin in Safari - css

Question

I'm having trouble with Safari adding a 1px margin/gap to the left on the first element in a flexbox row. I've attached an image below of the issue:
The flex box css is:
.equal-height {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-flex-direction: row;
-webkit-flex-wrap: wrap;
flex-direction: row;
flex-wrap: wrap;
}
The child elements are set to the following:
.child-div {
float: left;
display: block;
width: 33.3333%;
box-sizing: border-box;
}
But they I have noticed that they are computed with no float

Answer 1

file: style.css;
line: 1028
.row:before, .row:after{
content: " ";
display: table;
}
add:
width: 100%
and now the "margin" is solved.
The grid system you used has problems with safari: change it.
Hope I've helped you.

Answer 2

I've noticed this as well. Here's what worked for me:
.row:before, .row:after {
display: none;
}

Answer 3

The reason they are computed with no float is that flex cancels them.
As per flexbox spec:
float and clear have no effect on a flex item, and do not take it
out-of-flow. However, the float property can still affect box
generation by influencing the display property’s computed value.
So 100% width on the flex container as per Michael is ok, but if you want flexbox, what you want is:
.child-div {
width: 33.3333%;
box-sizing: border-box;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
i.e. You need to use either floats or flex, but not both.
You may want to have a look at this flexbox generator to understand how flex works.