Menu over full width

HTML

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS

#nav {
    list-style: none;
    margin: 0;
    padding: 10px;
    background: red;
    width: 400px;
}
#nav li {
    display: inline-block;
    background: green;
    margin: 0; /* must be 0 on the left and right */
    padding: 0; /* must be 0 on the left and right */
    margin-right: -4px; /* delete default inline-block margin */
}
#nav li a {
    display: block;
    padding: 5px 0; /* padding-left and right must be 0 */
    margin: 5px;
    background: yellow;
}

JavaScript

$(document).ready( function() {
    var ulWidth = $("#nav").width();
    
    var aTotalWidth = 0;
    var numA = 0;
    
    $("#nav li a").each( function() {
        var aWidth = $(this).width() 
            + parseInt($(this).css("margin-left")) 
            + parseInt($(this).css("margin-right"))
            + parseInt($(this).css("borderLeftWidth")) 
            + parseInt($(this).css("borderRightWidth"));
        aTotalWidth += aWidth;
        numA += 1;
    });
    
    var spaceBetween = ulWidth - aTotalWidth;
    var aPadding = Math.floor( spaceBetween / (numA * 2 ) );

    $("#nav li a").each( function() {    
        $(this).css('padding-left', aPadding);
        $(this).css('padding-right', aPadding);
    });
});