Div-Elemente, die sich nicht über die volle Breite des Bourbon-Gitters verteilen

Question

Nicht sicher, warum meine div-Elemente nicht die gesamte Breite meines Bourbon-Gitters überspannen. Der Prozess passiert nur für die letzten zwei Divs. siehe Bild. Warum verhält es sich so? Ein ähnliches Problem auf codepen erfahren. Warum belegen die div-Elemente nicht das gesamte Raster?

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); 
} 

} 

Lösung: Ich hatte @include omega(2n) hinzuzufügen. Ich bin nicht sicher, ob dies eine gute Methode ist, aber für den Moment ausreichen wird.

Answer 1

Omega nur

Entfernt die Rinne Rand des Elements, und zwar unabhängig von ihrer Position in der Hierarchie oder Gitteranzeigeeigenschaft. Es kann auf ein bestimmtes Element, oder jedes n-te Kind-Vorkommen, ausgerichtet werden. Funktioniert nur mit Blocklayouts.

Source

Versuchen Sie, die Gosse-Marge von Elementen zu entfernen. Und vergessen Sie nicht die Ränder auf body Element.