css percentage width <li> do not fill ipod/iphone viewport in portrait

Question

http://itshappeninghere.com/mobile/explorer.php

Pulling up the page above in a browser will show that the list items for the menus at the top and bottom (collapsed by default), fill the viewport.

Pull up the same page on an ipod touch or iphone, the list items won't fill the viewport on portrait (there is a small gap on the right), but on landscape the page looks fine.

Is there anyway to fix this or is it just a quirk of css rendering?

Here's the CSS for the list items.

ul#m_nav li {
width: 16.667%;
min-height: 10px;
float: left;
-webkit-border-radius: 0;
    border-radius: 0;
}
.mobile #filters ul li {
width: 16.667%;
min-height: 10px;
float: left;
-webkit-border-radius: 0;
    border-radius: 0;
}

Answer 1

I think it is due to CSS rendering and the percentage-based widths that you're using. Webkit might be rounding it off differently than you intend - these things sometimes crop up.

Instead of floats with a percentage based width, could you try table display properties:

#filters ul {
    width: 100%;
    margin: 0;
    padding: 0;
    display:table;
}
#filters ul li {
    padding: 0;
    margin: 0;
    display: table-cell;
    height: 10px;
}

Check out this JS fiddle to see what it does.