html - Susy グリッドの配置が少しずれている

Question

スージーを学び、愛しています。ただし、単純なことをテストしているときに、いくつかの癖があります。間にガタースペースがあり、その後に全幅の列がある2つの半幅の列を並べて作成しようとしています。問題は、後半の半幅列 (y) が完全に右に浮いていないことです。完全に削除した場合padding: 5px、その列はまだ1pxオフになっており、全幅の列と一致しません (z)

HTML

<div class="row">
    <div class="left">x</div>
    <div class="right">y</div>
</div>

<div class="row">
    <div class="full">
        z
    </div>
</div>

サス

$susy: (
     global-box-sizing: border-box,
     gutters: 1/4,
     gutter-position: outside
);

.row { 
     @include container(320px); 
}

.left {
    @include span(1 of 2);
}

.right {
    @include span(1 of 2);
    @include last;
}

.full {
    @include span(2 of 2);
}

.left,
.right,
.full {
    border: solid 1px #000;
    background: #fff;
    margin-bottom: 25px;
    padding: 5px;
 }

出力されたコードの jsfiddle は次のとおりです。

JSFiddle

なぜうまく整列しないのですか？

おそらく Susy 自体の問題ではありませんが、適切に使用していますか? 同じことを行い、それ自体を右にフロートさせるより良い方法はありますか? 次のコードは、.right の同じクラスで float: left と float: right を出力しますが、不要のようです。