HTML5 / CSS DIV not horizontally aligned?

I'm having trouble that this works too well, for some strange reason the DIV is horizontally aligned correctly and the second div ends below the first. Any help would be greatly appreciated.

HTML:

<footer>
    <div class="inner">
    <section id="footer-copyright" class="clear left">
    <ul>
    <li>© 2013
    <a href="/">Company</a>
    |
    <a href="sitemap.html">Sitemap</a>
    |
    <a href="privacy.html">Privacy Policy</a>
    </li>
    </ul>
    </section>
    <section class="footer-box clear right">
    <ul>
    <li>Design by <a href="/" target="new">Template</a></li>
    </ul>
    </section>
    </div>
</footer>

      

        
        
        
      

    

CSS

footer .inner {
    padding-top: 50px;
}

#footer-copyright {
    display: block;
    padding-top: 35px;
    width:50%;
}

#footer-box {
    display: block;
    padding-top: 35px;
}

footer ul {
    color: #FFFFFF;
    list-style: none outside none;
    padding: 10px 0;
}

.inner {
    margin: 0 auto;
    position: relative;
    width: 1000px;
}

.clear {
    clear: both;
    display: block;
}

.right, .alignright {
    float: right;
}

.left {
   float:left;
}

      

        
        
        
      

    

Maybe I just need a fresh set of eyes ... :)

You can view the working link here