Div元素不跨越Bourbon整洁网格的全宽

Question

不确定为什么我的div元素没有跨越波旁网格的整个宽度。该过程仅发生在最后两个div中。 见图片。为什么它以这种方式表现？在codepen遇到类似问题。为什么div元素不占据整个网格？

HTML

 <div class="main-container">
       <div class="articles">
            <article></article>
            <article></article>
            <article></article>
            <article></article>
            <article></article>               
        </div>
    </div>

CSS

 .articles{
  @include outer-container;

    article {
        margin-bottom: 50px;
        border-bottom: 1px solid $lightest-grey;

        img{
            width: 100%;
            height: auto;
        } 

        span{
            color: $light-grey;
        }
    }
}


@include media ($tablet) {

article{
    @include span-columns(3 of 6);
}

}

解决方案：我必须添加@include omega(2n)。我不确定这是不是一个好方法，但现在就足够了。

Answer 1

欧米茄只是

  

删除元素的阴沟边距，无论其位置如何   网格层次结构或显示属性。它可以针对特定元素，   或每一个孩子的出现。仅适用于块布局。

     

Source

尝试从元素中删除装订线边距。并且不要忘记body元素上的边距。