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

오메가는

에 관계없이 그리드 계층 구조 또는 디스플레이 속성에서의 위치의 요소의 제본 용 여백을 제거합니다. 특정 요소 인 또는 모든 n 번째 자식 항목을 타겟팅 할 수 있습니다. 블록 레이아웃에서만 작동합니다.

Source

요소에서 제본 용 여백을 제거하십시오. body 요소의 여백을 잊지 마세요.