title: Vary outer-container size with Bourbon Neat
body: <p>I'm learning to work with Bourbon Neat and I always worked with Bootstrap's grid system. I'm trying to recreate <a href="http://getbootstrap.com/examples/grid/" rel="nofollow noreferrer">this Bootstrap grid page</a> to learn the basics of Bourbon Neat.</p>
  <p>The settings I use are:</p>
  <pre><code>// Bourbon Neat Grid Settings
  $column: 70px;
  $gutter: 30px;
  $grid-columns: 12;
  $max-width: em(1170);
  $visual-grid: true;
  </code></pre>
  <p>I determined my breakpoints and set them with the <a href="http://neat.bourbon.io/docs/#new-breakpoint" rel="nofollow noreferrer">new breakpoint</a> function, in which I can also change the number of columns.</p>
  <p><strong>But what I do want to change is the container size.</strong> In Bootstrap, the container's max-width varies like this:</p>
  <blockquote>
  <p><strong>@media &gt;1200px:</strong> max-width: 1170px;</p>
  <p><strong>@media &gt;992px:</strong> max-width 970px;</p>
  <p><strong>@media &gt;768px:</strong> max-width: 750px;</p>
  </blockquote>
  <p>In Bourbon Neat however, the max-width is set once with a variable. I currently have it set to <code>max-width: em(1170);</code> How can I let this container size vary? How can I achieve the same example page with Bourbon Neat instead of Bootstrap 3? I know that in Susy you can <a href="http://susy.oddbird.net/guides/reference/#ref-set-container-width" rel="nofollow noreferrer">set the container width</a></p>