<div class="outer-container">
  

  <h2>Common mistakes</h2>
    
  <h3>Applying grid collapse to the top level container</h3>
  
  <div class="grid-container grid-collapse">
    
     <div class="box">
       <p>This box won't align with other grid elements.</p>
     </div>
    
  </div>
  
</div>

@import "neat@2.*";

body {
  margin: 0;
  font-size: 20px;
  font-family: monospace;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.outer-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px 0;
  background-color: darkseagreen;
}

.grid-container {
  
  // all grid-columns should be wrappeed in a container element.
  @include grid-container;
  
  &.grid-collapse {
    
    // this removes the outer margins of the container, 
    // for use with nested grids.
    @include grid-collapse;
  }
}

.grid-column {
  
  background-color: tomato;
  height: 200px;
  margin-bottom: 20px;
  
  .grid-column {
    background-color: orange;
  } 
  
  
  &.grid-column--6 {
    @include grid-column(6);
  }
  
}

.box {
  background-color: lavender;
  padding: 20px;
}