ok, i think im crazy but either i get the ul inline, or centered, never both. any suggestions
style portion

#mainnav {
position:absolute;
text-align:center;
width: 80%;
background: #1f395a;
top:100px;
left:10%;
border-style:solid;
border-color: transparent transparent #a0aec1;
border-width: 0 1px 4px;
}


#mainnav ul {
margin: 0 auto;
padding: 0;
list-style: none;
text-align:center;
}

#mainnav li {
display: inline;
}

#mainnav a {
text-decoration: none;
display: block;
border-style: solid;
border-color: transparent transparent #a0aec1;
border-width: 0 1px 4px;
padding: 6px 15px 3px;
color: #fff;
font-weight: bold;
font-size: 75%;
}


and html

<ul id="mainnav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a> </li>
</ul>

and there are going to be more items in the li

Thanks in advance

The text-align will just center the text inside the element if I'm not mistaken. I would place inside a <div> and center that using left and right auto margins.

still cant get it to work then. I think i have some element of the style that cancels out to center maybe?

Try removing display:block; from #mainnav a

Worked! thank you, i knew it was something stupid like that and ive been killing myself the last two nights trying to figure this one out.