title: Text padding is not working in floated div
body: <p>Okay so I have a floated div, within it I have a unorganised list.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="navigation-nav" id="navigation-nav"&gt;
    &lt;ul class="navigation-list"&gt;
      &lt;li class="navigation-item"&gt;&lt;a class="navigation-link current" href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li class="navigation-item"&gt;&lt;a class="navigation-link" href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li class="navigation-item"&gt;&lt;a class="navigation-link" href="projects.html"&gt;Projects&lt;/a&gt;&lt;/li&gt;
      &lt;li class="navigation-item"&gt;&lt;a class="navigation-link" href="#collage"&gt;Collage&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now if I try to change the padding or margin on either <em>navigation-item</em> or <em>navigation-link</em> it will add either a padding (which is what I want) or a margin <strong>only</strong> the x-axis, so left or right. I want to add horizontal padding. I have tried adding in a wrapper - like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="navigation-nav" id="navigation-nav"&gt;
    &lt;div class="navigation-wrapper"&gt;
      &lt;ul class="navigation-list"&gt;
        &lt;li class="navigation-item"&gt;&lt;a class="navigation-link current" href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class="navigation-item"&gt;&lt;a class="navigation-link" href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li class="navigation-item"&gt;&lt;a class="navigation-link" href="projects.html"&gt;Projects&lt;/a&gt;&lt;/li&gt;
        &lt;li class="navigation-item"&gt;&lt;a class="navigation-link" href="#collage"&gt;Collage&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But that did not work. Here is all the CSS:</p>
  
  <pre><code>    .navigation-nav {
      right: 0;
      float: right;
      width: 50%;
      text-align: right;
  }
  
  .navigation-wrapper {
      float: none;
      overflow: visible;
  }
  
  
  .navigation-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: block;
  }
  
  .navigation-item {
      display: inline;
      padding: 1em;
  
  }
  </code></pre>