title: Converting margin from pixel to percentage - breaks float left element
body: <p>I have the following HTML block: </p>
  
  <pre><code>  &lt;div class="container clearfix"&gt;
    &lt;div class="grid_8 omega"&gt;
       &lt;ul class="nav"&gt;
          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Cupcakes &amp;amp; Prices&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Locations&lt;/a&gt;&lt;/li&gt;
          &lt;li class="last"&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Which is styled this way:</p>
  
  <pre><code>ul.nav {
    margin-top: 18.18%;
    list-style: none;
    float: right;
  }
  
  ul.nav li {
    float: left;
    margin-right: 40px;
  }
  </code></pre>
  
  <p>And this gives me the following result (Web developer toolbar outlines on):</p>
  
  <p><img src="https://i.stack.imgur.com/kydWH.png" alt="Screenshot1"></p>
  
  <p>Now I am trying to change the 40px margin to percentage in order to make the site more fluid and from I have learnt I should use the target / context = result which in this case is 40px / 660px = 0.06 which is roughly 6%. I then change the 40px to 6% and I get the following instead:</p>
  
  <p><img src="https://i.stack.imgur.com/P5qYq.png" alt="Screenshot2"></p>
  
  <p>What have I done wrong here? The width of the ul block has shrunk and the margin-right is not changing when I resize the browser window. It seems no matter what amount of percentage I put in there is no value in percentage that makes this work at all. I must be using percentages wrong? Why isn't it working?</p>