Remove 1px gap when using display:flex with Bootstrap - css

Question

In some browsers, such as Safari 9, the following bootstrap grid is leaving a 1px gap on either side of the row element. Why is that?
.a {background-color:#eee}
.b {background-color:#ddd}
.row {background-color:red}
.vertical-align {
display: flex;
align-items: center;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-6 a">Hello</div>
<div class="col-xs-6 b">World</div>
</div>
</div>
<br><br>
<div class="container">
<div class="row vertical-align">
<div class="col-xs-6 a">Hello</div>
<div class="col-xs-6 b">World</div>
</div>
</div>

Answer 1

The gap is caused by the clearfix gap - content: " " - which is on pseudo elements of the bootstrap .row class.
To prevent the gap:
Remove the "row" class as well as the parents "container" class
or
Remove the clearfix pseudo element with:
div.vertical-align:before, div.vertical-align:after { display: none }
Note: Placing "div" before the class selector - .vertical-align - prevents the need for !important
The two examples
Without removing the row class
.a {
background-color: #eee
}
.b {
background-color: #ddd
}
.row {
background-color: red
}
.vertical-align {
display: flex;
align-items: center;
}
div.vertical-align:before,
div.vertical-align:after {
display: none;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-6 a">Hello</div>
<div class="col-xs-6 b">World</div>
</div>
</div>
<br>
<br>
<div class="container">
<div class="row vertical-align">
<div class="col-xs-6 a">Hello</div>
<div class="col-xs-6 b">World</div>
</div>
</div>
With the removal of the row class.
The class - .container - also needs to be removed.
.a {
background-color: #eee
}
.b {
background-color: #ddd
}
.row {
background-color: red
}
.vertical-align {
display: flex;
align-items: center;
}
div.vertical-align:before,
div.vertical-align:after {
display: none;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-6 a">Hello</div>
<div class="col-xs-6 b">World</div>
</div>
</div>
<br>
<br>
<div>
<div class="vertical-align">
<div class="col-xs-6 a">Hello</div>
<div class="col-xs-6 b">World</div>
</div>
</div>