title: 3 column layout with list items
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.clearself:before,.clearself:after{content: " ";display: block;height: 0;overflow: hidden;}
  .clearself:after{clear: both;}
  .clearself{zoom: 1;} /* IE &lt; 8 */
  
  ul.three-col-row li{width: 25%;margin-right: 5%;float: left;text-align: center;}
  ul.three-col-row li:nth-child(4n+4){margin-right:5%;float: left;} 
  ul.three-col-row li:nth-child(3n+3){margin-right: 5%;float: right;} 
  
  .intro{margin:60px 0 0 0;}
  .intro h2{margin-bottom: 15px;}
  .intro p{margin-bottom: 30px;}
  .intro ul.three-col-row li {min-height:310px;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="intro clearself"&gt;
        &lt;ul class="three-col-row"&gt;
           &lt;li&gt;
            &lt;h2&gt;Wat?..&lt;/h2&gt;
            &lt;p&gt;Praktische en juiste informatie is een belangrijke deelsleutel tot de oplossing van rugproblemen.&lt;/p&gt;
            &lt;a class="button" href="advice.html"&gt;Meer info!&lt;/a&gt;
          &lt;/li&gt;&lt;!-- 
           --&gt;&lt;li&gt;
            &lt;h2&gt;Hoe...&lt;/h2&gt;
            &lt;p&gt;Ga zo ver mogelijk in de beweging en herhaal dit regelmatig gedurende U capaciteit.&lt;/p&gt;
            &lt;a class="button" href="work-out.html"&gt;Kies je sport!&lt;/a&gt;
          &lt;/li&gt;&lt;!--
          --&gt;&lt;li class="last-row1"&gt;
            &lt;h2&gt;Doel...&lt;/h2&gt;
            &lt;p&gt;Het belangrijkste aspect is echter dat U ontdekt dat U ZELF veel kan doen om uiteindelijk uw rugklacht te vermijden,meer dan U welicht denkt.&lt;/p&gt;
            &lt;a class="button" href="about.html"&gt;Meer info!&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My problem with this is that second column it is not centered correctly. The space between second and third column is too big...My  main content width is 90%, my section min-height is 310px.
  When I test the page on Firefox the width of my 3 columns is 275x310px but they still don't look equal. When I test it on Chrome, the width of my 2 columns is 275x310px and the middle one 274x310px.
  How can I make the spaces equal?</p>