title: Navigation breaks into new line
body: <p>The navigation breaks into a second line as soon as I add "margin-right: 4%" in "nav li" - if I use px instead of % the problem won't occur, eg.: "margin-right: 10px" . I am not sure why this is happening</p>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/k93K2/" rel="nofollow">http://jsfiddle.net/k93K2/</a></p>
  
  <pre><code>&lt;header&gt;
          &lt;div id="container"&gt;
              &lt;div id="logo"&gt;
                  &lt;a href="#"&gt;&lt;img src="http://placehold.it/220x80"/&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;nav&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Team&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/div&gt;&lt;!--container--&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>--</p>
  
  <pre><code>.container {
      max-width: 1070px;
      margin: 0 auto;
  }
  
  header {
      overflow: hidden;
  }
  
  #logo {
      float: left;
  }
  
  nav {
      float: right;
  }
  
  nav li {
      display: inline;
      text-align: center;
      margin-right: 4%;
  }
  </code></pre>