css - Div は 1 つの行ではなく、susy グリッド システムの新しい行に移動します

Question

3つの等間隔の中央のdivを含むsusyで12列のページを作成したいのですが、これを行うと

HTML :

<div id='container'>
   <div class='col-1'></div>
   <div class='col-2'></div>
   <div class='col-3'></div>
</div>

サス：

#container{
   @include container(80%);
   @include layout(12);

   .col-1{ background:red; }
   .col-2{ background:blue; }
   .col-3{ background:green; }

   .col-1,.col-2,.col-3{
       @include span(1 of 3);
       height:100px;
   }
}

3 番目の div は、この図のように新しい行に移動しますが、1 行にまとめたいと思います。

そして、私のCSSファイルには次のものがあります:

#container .col-1, #container .col-2, #container .col-3 {
   width: 28.57143%;
   float: left;
   margin-right: 7.14286%;
   height: 100px;
}

更新: 私の計算が正しければ 3*28.57143 + 7.14286*3 != 100 、それは約 107 ですが、なぜですか?

28.57143 は各 div の幅で、7.14286 はパーセンテージで表した右マージンです。