Neat（bourbon.io）列与外部容器不匹配，是吗？

Question

修改：更新了屏幕截图以匹配标记 修改：完整标记位于https://gist.github.com/matgargano/68de587d905029bf3b29

我添加了bourbon和neat并在我的设置中设置：

$visual-grid-opacity: 0.4;
$visual-grid-index: back;
$visual-grid-color: #000;
$visual-grid: true;

然后补充说：

.content-area {
    @include span-columns(9);
}

.widget-area {
    @include span-columns(3);
}

显示的是12列但是我的跨栏：9只占用~6而我的3占据了~3但是在我的阴沟中间。

我做错了什么？