title: How to make 3 column nested list to have only inner gutter (no outside margins)?
body: <p>I have a slight problem with lining my nested list with everything else.
  I use semantic.gs grid for a site: <a href="http://grrr.dontmeshwithus.com/" rel="nofollow">http://grrr.dontmeshwithus.com/</a>
  As you can see, the nested list on the bottom doesn't line up with the black line above or the div "slideshow". There's a small gap on both left and right sides of the outer lists. You can see the problem more clearly by resizing your browser window.</p>
  
  <p>Are there any tricks or ways of dealing with this? The only way I found I could get rid of the gap was by using CSS3 columns, but they don't work cross-browser.. is there a way to make them work cross-browser? Or is there another way to give the list items only inner margin? Or should I just use CSS3 columns and make a fallback for IE..?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;article id="memberContainer"&gt;
      &lt;ul id="memberList"&gt;
          &lt;li&gt;1&lt;/li&gt;
          &lt;li&gt;2&lt;/li&gt;
          &lt;li&gt;3&lt;/li&gt;
          &lt;li&gt;4&lt;/li&gt;
          &lt;li&gt;5&lt;/li&gt;
          &lt;li&gt;6&lt;/li&gt;
          &lt;li&gt;7&lt;/li&gt;
          &lt;li&gt;8&lt;/li&gt;
      &lt;/ul&gt;
   &lt;/article&gt;
  </code></pre>
  
  <p>CSS(/LESS):</p>
  
  <pre><code> @columns: 12;
   @column-width: 81;
   @gutter-width: 19;
   @total-width: 100%;
  
      #memberContainer {
      .border;
      ul#memberList {
        .row(9);
        li {
          .column(3,9);
          margin-top: 1em;
        }
      }
    }
  </code></pre>
  
  <p>The semantic.gs grid that I'm using can be found here:
  <a href="https://github.com/twigkit/semantic.gs/blob/master/stylesheets/less/grid.less" rel="nofollow">https://github.com/twigkit/semantic.gs/blob/master/stylesheets/less/grid.less</a></p>
  
  <p>Thanks</p>