title: Responsive Design and Percentages
body: <p>I am new to responsive design. I'm currently using Zurb's Foundation 4 to prototype a clients website.</p>
  
  <p>I have an issue understanding, or should I say calculating percentages. For example, I have the following piece of HTML in my code:</p>
  
  <pre><code>&lt;ul id="offers"&gt;
      &lt;li class="small-6 large-3 columns"&gt;Offer 1&lt;/li&gt;
      &lt;li class="small-6 large-3 columns"&gt;Offer 2&lt;/li&gt;
      &lt;li class="small-6 large-3 columns"&gt;Offer 3&lt;/li&gt;
      &lt;li class="small-6 large-3 columns"&gt;Offer 4&lt;/li&gt;
      &lt;li class="small-6 large-3 columns"&gt;Offer 5&lt;/li&gt;
      &lt;li class="small-6 large-3 columns"&gt;Offer 6&lt;/li&gt;
      &lt;li class="small-6 large-3 columns"&gt;Offer 7&lt;/li&gt;
      &lt;li class="small-6 large-3 columns"&gt;Offer 8&lt;/li&gt;
      &lt;li class="small-6 large-3 columns"&gt;Offer 9&lt;/li&gt;
      &lt;li class="small-6 large-3 columns"&gt;Offer 10&lt;/li&gt;
      &lt;li class="small-6 large-3 columns"&gt;Offer 11&lt;/li&gt;
      &lt;li class="small-6 large-3 columns"&gt;Offer 12&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want to add some spacing between the blocks, a margin, but I don't want to use pixel values because this will take up to much screen real estate. If for example I wanted a 20px margin, how could I convert that into a percentage and ensure it's consistent across all browsers?</p>
  
  <p>It's a little confusing to me.</p>