space-betweenで端に隙間ができた

現象

justify-content:space-betweenを用い、要素の最初と最後を、開始、終了端に合わせ配置させた。
しかし、両端に余白できた。

原因

.containerを横並びに配置する。
この時、.block:before:afterが定義してある為、見えない擬似要素が、最初と最後の.containerの前後に存在する。
結果、両端に余白ができた。

<style>
.block {
display : flex;
justify-content : space-between;
width : 400px;
border : 1px solid #ff0000;
}
.block:before,
.block:after {
content : "";
}

.container {
display : block;
width : 100px;
height : 100px;
background : #ff0000;
}
</style>

<div class="block">
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
</div>