title: Remove margin on span columns with Bourbon Neat
body: <p>I'm starting to use Thoughtbot's Bourbon Neat for responsive grids. Overall, it's pretty slick and I really like it, but I'm hung up on one little issue.</p>
  
  <p>I'm trying to get two columns to butt up next to each other without the margins, but after trying to replicate what they have from their examples, I'm not getting the same result.</p>
  
  <p>Here's the sample HTML:</p>
  
  <pre><code>&lt;section&gt;
      &lt;p&gt;
          This is the main section.
      &lt;/p&gt;
  
      &lt;div class="container"&gt;
          &lt;p&gt;
              This is the container
          &lt;/p&gt;
  
          &lt;div class="col1"&gt;
              &lt;p&gt;
                  This is the 1st column.
              &lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="col2"&gt;
              &lt;p&gt;
                  This is the 2nd column.
              &lt;/p&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Here's my SCSS:</p>
  
  <pre><code>section {
  @include outer-container;
  text-align: center;
  }
  
  .container {
  @include span-columns (12);
  text-align: center;
  margin: 0;
  padding: 0;
  
  
  .col1 {
      @include span-columns(6);
      background: #ccc;
      @include pad(em(15));
  }
  .col2 {
      @include span-columns(6);
      background: #ccc;
      @include pad(em(15));
   }
  
  }
  </code></pre>
  
  <p>Which produces this:</p>
  
  <p><img src="https://i.stack.imgur.com/gsukJ.png" alt="enter image description here"></p>
  
  <p>But when I try to get the two columns to nest/butt up to each other using the table method as their example shows, I get this:</p>
  
  <p><strong>SCSS:</strong></p>
  
  <pre><code>section {
  @include outer-container;
  text-align: center;
  }
  
  .container {
  @include span-columns (12);
  @include row (table);
  text-align: center;
  margin: 0;
  padding: 0;
  
  
  .col1 {
      @include span-columns(6);
      background: #ccc;
      @include pad(em(15));
  }
  .col2 {
      @include span-columns(6);
      background: #ccc;
      @include pad(em(15));
      @include reset-display;
   }
  
  }
  </code></pre>
  
  <p><strong>Output:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/lVbzO.png" alt="enter image description here"></p>
  
  <p>If I go the <code>@include omega();</code> route that works, but then it doesn't expand the full width of the last column:</p>
  
  <p><strong>SCSS:</strong></p>
  
  <pre><code>section {
  @include outer-container;
  text-align: center;
  }
  
  .container {
  @include span-columns (12);
  text-align: center;
  margin: 0;
  padding: 0;
  
  
  .col1 {
      @include span-columns(6);
      @include omega();
      background: #ccc;
      @include pad(em(15));
  }
  .col2 {
      @include span-columns(6);
      background: #ccc;
      @include pad(em(15));
      @include omega();
   }
  
  }
  </code></pre>
  
  <p><strong>Output:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/fB3wJ.png" alt="enter image description here"></p>
  
  <p>Essentially, I could just omit the content that is in the container section which does some what yield the result that I am looking for. But is that necessary to create an empty <code>div</code> in order to achieve that?:</p>
  
  <p><strong>SCSS</strong></p>
  
  <pre><code>section {
  @include outer-container;
  text-align: center;
  }
  
  .container {
  @include span-columns (12);
  @include row(table);
  text-align: center;
  margin: 0;
  padding: 0;
  
  
  .col1 {
      @include span-columns(6);
      background: #ccc;
      @include pad(em(15));
  }
  .col2 {
      @include span-columns(6);
      background: #ccc;
      @include pad(em(15));
      @include reset-display
   }
  
  }
  </code></pre>
  
  <p><strong>HTML (content in the <code>.container</code> is commented out):</strong></p>
  
  <pre><code>&lt;section&gt;
      &lt;p&gt;
          This is the main section.
      &lt;/p&gt;
  
      &lt;div class="container"&gt;
          &lt;!-- &lt;p&gt;
              This is the container
          &lt;/p&gt; --&gt;
  
          &lt;div class="col1"&gt;
              &lt;p&gt;
                  This is the 1st column.
              &lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="col2"&gt;
              &lt;p&gt;
                  This is the 2nd column.
              &lt;/p&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>Output:</strong>
  <img src="https://i.stack.imgur.com/GdkR1.png" alt="enter image description here"></p>
  
  <p>Anyways, I don't know what's the "proper" way of achieving this. The documentation isn't really specific for explaining how to go about getting two columns to nest up against each other. And from what I tried to replicate in their example didn't yield the same result.</p>
  
  <p>Unless I need to specifically add a <code>margin:0;</code> on the last column.</p>