0

Not sure why my div elements are not spanning the full width of my bourbon grid. The process only happens for the last two divs. see image. Why does it behave in this way? Experiencing a similar issue on codepen. Why aren't the div elements occupying the full grid?

enter image description here

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

}

Solution: I had to add @include omega(2n). I'm not sure if this is a good method but will suffice for now.

Samuel
  • 5,529
  • 5
  • 25
  • 39

1 Answers1

0

Omega just

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

Source

Try removing the gutter margin from elements. And don't forget about margins on body element.

Community
  • 1
  • 1
Cordo van Saviour
  • 570
  • 3
  • 11
  • I removed margin/padding from body yet the same thing happens. Have a look and comment out omega in this pen -http://codepen.io/ssosina/pen/NrqBjv – Samuel Jun 05 '16 at 00:43
  • What I meant by removing gutter margins is that every div in your pen has `margin-right` property set around 2.35%. In order for the three columns to fit into this grid, you will need to set `margin-right: 0;` property on every third element. You can find edited pen here: [link](http://codepen.io/Cordo-van-Saviour/pen/rLVqEd) – Cordo van Saviour Jun 05 '16 at 09:09