I'm struggling to evenly space out my navigation bar across the 4 column grid. I want each list item to function more like a button block and have equal widths so that the hover-on border tops are all symmetrical.
Check out the website:
HTML:
<div class="nav-wrapper grid_4">
<nav>
<ul>
<li>
<a href="/" id="">portfolio</a>
</li>
<li>
<a href="/" id="">resume</a>
</li>
<li>
<a href="/" id="">blog</a>
</li>
<li>
<a href="." id="about-btn">about me</a>
</li>
</ul>
</nav>
</div><!--end of nav-wrapper-->
Here is my CSS:
.nav_-wrapper nav ul{}
.nav-wrapper nav ul li
{
float:right;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px;
zoom: 1;
margin-top:35px;
padding:
*display: inline;
}
.nav-wrapper nav ul li a {
list-style:none;
text-decoration:none;
font-size:13.5px;
}