How can I evenly space out the elements of my navigation bar using the width attribute?

Question

Here's a simulation: http://jsfiddle.net/LQ9DP/

And here's the HTML and relevant CSS sections respectively: HTML:

<div id="footer">        
        <div class="nav_wrapper">
            <ul id="list_orientation">
                <li><a href="http://www.facebook.com">Facebook</a></li>
                <li id = "portfolio_text"><a href="http://www.google.com">Portfolio</a></li>
                <li><a href="http://www.google.com">Email</a></li>
            </ul>
        </div>
    </div>

CSS:

   #heading{
    font-family:'ChunkFiveRomanRegular';
    position: absolute;
    font-size:80px;
    top: 10%;
    left: 0px;
    width: 100%;
    height: 1px;
    text-align:center;
}

.border{
    border-top: 5px dashed #000000;
    border-bottom:5px dashed #000000;
    padding:20px;
}

body{
background:#ffdd22;
}

#subheading{
    font-family:'MuseoSlab500Regular';
    text-align:center;
    font-size:25px;
}

.nav_wrapper{
    position:relative;
    margin:auto;
    /*width:30%;*/
    /*Change this
    width:30%;*/
}

.nav_wrapper ul li {display:inline; width:30%;}
.nav_wrapper ul li a {width:30%;}

#footer{
    width:100%;
    float:left;
    position:fixed;
    bottom:0;
    z-index:100;
}

#list_orientation {
    padding:0;
    margin:0;
    height:5%;
}​

Answer 1

you mean like this? http://jsfiddle.net/LQ9DP/13/

Answer 2

would you mind trying to give padding to the elements instead of giving a fixed width? And in case of centering the text vertically you may use the height of the text containing box same as the line-height of the text.