ul percentage width with border

Question

I have a ul and table directly below, and I want to 2 to line up. Unfortunately as I've discovered, percentages can't be applied to the border I have, which is making the ul either too wide or narrow, depending on screen size.

Apparently putting things into a container should do the trick, but I couldn't get this to work. Any tips?

It's the blue border that's the offender, shown in a jsfiddle here: http://jsfiddle.net/cemLkm5j/1/

HTML example:

<ul class="nav">
        <li><a href="">Home</a></li><li><a href="">Couriers</a</li><li><a href="">Reviews</a></li><li><a href="">Retailers</a></li>
</ul>

<table>
<tr>
    <td>
        test
    </td>
</tr>

CSS:

.nav a {
border-left: 0px solid !important;  
border-right: 5px solid !important;    
width: 44.6% !important;
margin: 0px !important; 
padding: 0px !important;
line-height: 30px !important;
vertical-align: middle !important;      
}

Answer 1

Use the border-box value for the box-sizing property for your links. This way if you add a border to your element, it will be included in your width, so you can simply use width:50% on your links. This is how it works:

.nav a {
    border-left: 0px solid !important;  
    border-right: 5px solid !important;    
    width: 50% !important;
    margin: 0px !important; 
    padding: 0px !important;
    line-height: 30px !important;
    vertical-align: middle !important;  
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Also, you need to define the same width for your navigation container, 90%, just like the table:

.nav {
    width: 90%;
    margin: 0 auto !important;
}

Example: http://jsfiddle.net/cemLkm5j/2/