css display:table-cell not scaling in fluid layout

Question

I'm learning about fluid layouts and have been puzzled by a scaling issue in my code. I'm using a floatless fluid layout in which div-parent dimensions are formed by height:pixel,width:percentage, & the children are defined by percentages. For a mobile site.

My issue is with my footer navigation.
My horizontal list cells are fitting lopsidedly into the parent ul --- either too small (when viewed in a vertical mobile view) or too large (in a monitor or horizontal mobile) for the space. I need the li blocks to fit & sit centered within the footer and scale as the viewport gets larger.

I'm sure this is a easy fix but not for me. I've tried moving measurements around to get it to work. I would love to have a fresh eye look at this for me :)

Here's a mock-up of the mobile page

CSS

footer {
    height:53px;
    width:100%;
    max-width:640px;
    margin:auto
}
#lower-navigation > ul {
    display:table;
    border-spacing:3px
}  
#lower-navigation > ul > li {
    display:table-cell
}
#lower-navigation  ul {
    height:100%;
    width:100%
} 
#lower-navigation  li {
    width:31%;
    height:100% !important;
    margin:auto auto;
    text-align:center
}
img.pic {
    max-width:100%;
    margin:0;
    padding:0
}
#lower-navigation a {
    display:block;
    padding:5%;
    border:thin #000 solid;
    font-size:.8em;
    color:#ccc;
    font-weight:300;
}look at this

HTML

<footer>
    <nav id="lower-navigation">
        <ul>
            <li><a href="/m/news.cfm"><img src="/m/img/purple-icon-news.png" class="pic" alt="" width="26" height="25" /> NEWS</a></li>
            <li><a href="sms:phone-number"><img src="/m/img/purple-icon-chat.png" class="pic" alt="" width="26" height="25" /> TEXT D.V.</a></li>
            <li><a href="/m/index.cfm"><img src="/m/img/purple-icon-home.png" class="pic" alt="" width="26" height="25" /> SHOP</a></li>
        </ul>
    </nav>
</footer>