div 元素不跨越波旁整齐网格的全宽

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

欧米茄

删除元素的边距，不管它在 网格层次结构或显示属性。它可以针对特定元素， 或每第 n 个孩子出现。仅适用于块布局。

Source

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