css - 基于百分比的填充打破了我的布局

Question

我正在尝试将所有宽度和边距以及填充转换为百分比，以使我正在处理的网站具有响应性。我得到了没有问题的标题，但现在我被卡住了。

当我更改我的 li 项目的填充时，布局会中断。在整个站点上，内边距应该是 6px，但即使我将内边距设置为一个百分比，即使小到 0.1%，它也会将其中一个元素向下颠倒。该网站尚未上线，但我提供了一些屏幕截图和一些代码。有任何想法吗？

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>

第一个问题，所以我不能发布图片，但它应该是这样的......