html - 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

刚刚欧米茄

Removes the element's gutter margin, regardless of its position in thegrid hierarchy or display property. It can target a specific element,or every nth-child occurrence. Works only with block layouts.

Source

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