Remove margin nested columns with Bourbon Neat

Question

How do I remove the margin from two columns with nested offset columns inside of them. I want to make sure that the content within the column's is always centered and I can not seem to get this to work using the @include row (table); mixin.

The codepen

The html

<section>
  <div class="container">
    <div class="col">
      <div class="inner">
        centered content
      </div>
    </div>
    <div class="col">
      <div class="inner">
        centered content
      </div>
    </div>
  </div>
</section>

The SCSS

@import "bourbon";
@import "neat";

section{
  @include outer-container(100%);

  .container{
      @include span-columns(12);
      @include fill-parent;

    .col{
      @include span-columns(6);
         border: 2px solid black;

      .inner{
         @include shift-in-context(1 of 6);
         @include span-columns(8 of 12);
          background: red;

      }
    }
  }
}

Cyto · Answer 1 · 2017-02-16T12:45:25.690

1

You mean this gap?

CSS

.col{
  @include span-columns(6);
     border: 2px solid black;
     margin-right: 0;
     width: 50%;

edited Feb 16 '17 at 12:45

answered Feb 16 '17 at 11:55

Cyto

60
1
8

I want to remove the gap between the cols (original pen) whilst still keeping 100% container width. – Simon Feb 16 '17 at 12:29

score 1 · Accepted Answer · answered Feb 17 '17 at 16:29

There's an option built in to Neat. It's the reset-display() mixin. Reset it from table to block in the .inner class and I think you're in good shape.

section {
  @include outer-container(100%);

  .container {
    @include row(table);
    @include fill-parent;

    .col {
      @include span-columns(6);
      border: 2px solid black;

      .inner {
        @include reset-display;
        @include shift-in-context(1 of 6);
        @include span-columns(8 of 12);
        background: red;
      }
    }
  }
}

Remove margin nested columns with Bourbon Neat

2 Answers2