title: Footer elements split left and right
body: <p>I've got this code for a footer:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;ul class="footer"&gt;
          &lt;li&gt;&lt;a href="/contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/about"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/help"&gt;Help&lt;/a&gt;&lt;/li&gt;
              &lt;ul class="right"&gt;
                  &lt;li&gt;&lt;a href="/newsletter"&gt;Newsletter&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/signin"&gt;Sign In&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/terms"&gt;Terms&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
       &lt;/ul&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>ul {
      list-style-type: none;
      padding: 0;
      overflow: hidden;
      bottom: 0;
  }
  
  li {
      position: fixed;
      bottom: 0;
      left: 0;
  }
  
  .right li{
      position: fixed;
      bottom: 0;
      right: 0;
  }
  
  li a {
      font-family: Helvetica;
      display: block;
      color: black;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
  }
  </code></pre>
  
  <p>It displays the code at the bottom and splits them in the middle. But they are all grouped in the corners. Is there a fix for this? (<a href="http://prntscr.com/cgks3s" rel="nofollow">SCREENSHOT</a>)</p>