title: Horizontal list element evenly spaced and responsive
body: <p>I am creating an unordered list that contains images and text, and would like each item to be 1/3rd the width with a margin, evenly spaced. I can't figure out how to ensure, in a responsive website, the items are always exactly 1/3rd the width, including margins. Percentages seem to not remain consistent across browsers.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;img&gt;Text&lt;/li&gt;
      &lt;li&gt;&lt;img&gt;Text&lt;/li&gt;
      &lt;li&gt;&lt;img&gt;Text&lt;/li&gt;
      &lt;li&gt;&lt;img&gt;Text&lt;/li&gt;
      &lt;li&gt;&lt;img&gt;Text&lt;/li&gt;
      &lt;li&gt;&lt;img&gt;Text&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>ul {list-style:none; text-align:center; margin:0;}
  ul li {display:inline-block; zoom:1; *display:inline; vertical-align:top; width:32%; margin:10px 1%;}
  </code></pre>
  
  <p>If I want two rows of three columns here, it will sometimes look fine and other times push the third item down to the next row--almost as if some browsers are adding a pixel or two somewhere. Is there CSS that I can use to just space it evenly across the entire width of the parent element?</p>
  
  <p>Note that the site is responsive so calculating exact pixels isn't going to work. I'd also rather avoid writing separate CSS for different browsers, if possible.</p>