Percentage based padding is breaking my layout

Question

I'm attempting to convert all widths and margin and padding to percentages to make the site I'm working on responsive. I got as far as the headder w/o issue but now I'm stuck.

When I change the padding on my li items the layout breaks. On the full site the padding should be 6px but even when I set the padding to a percentage, even as small as 0.1%, it bumps one of the elements down. The site isn't live but I'm including a couple of screenshots and some code. Any ideas?

aside#footer-brands ul  {
margin:0;
padding:0;
}

aside#footer-brands ul li {
padding:6px;
float:left;
list-style: none;   
}

aside#footer-brands ul li a {
background-image: url(/images/csr/footer/brands/sprite-brands.png);
background-repeat:  no-repeat;
display: block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

<aside id="footer-brands">
            <h6>Our Brands</h6>
            <ul>
                <li><a class="keurig-logo" href="http://www.keurig.com">Keurig</a></li>
                <li><a class="gmcr-logo" href="http://www.greenmountaincoffee.com">Green Mountain Coffee</a></li>
                <li><a class="tullys-logo" href="http://www.tullys.com">Tullys</a></li>
                <li><a class="timothys-logo" href="http://www.timothys.com">Timothys</a></li>
                <li><a class="diedrich-logo" href="http://www.diedrich.com">Diedrich</a></li>
                <li><a class="vanhoutte-logo" href="http://www.keurig.com/shop/k-cups/all-k-cups?hdnCategoryFacets=Brand:Van%20Houtte&hdnBaseFacets=Brand">Van Houtte</a></li>
            </ul>
</aside>

First questions so I can't post images but here's how it should look...

and how it looks when I changed the padding to a percent...

Edited to add URL:

You can view the page at http://nightowlsrock.com/3-col.html

Answer 1

Edit: ignore what I said before.

The W3C page on padding says

The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

And yes, undefined behaviour is what you see. I could produce vastly different results by setting the value to .8%, 1%, 1.2% etc.
So the answer seems to be that you should set the UL to some predetermined width first.