As a newcomer to coding in CSS, I have tried the suggested solutions for my issue without success. Any help would be greatly appreciated. My goal is to center my menu on the page while keeping the container background covering the full width available...
Here is my HTML code:
<div id="nav">
<li><a href="index.htm">Home</a></li>
<li><a href="about.htm">About</a>
<ul>
<li><a href="history.htm">History</a></li>
...
<li><a href="faq.htm">Contact Us</a></li>
</ul>
</li>
</ul>
</div>
And here is my CSS code:
#nav {
Z-INDEX: 10;
text-align:center;
width: 100%;
height: 20px;
background: green;
position: relative;
padding:3px;
font-size: 13px;
list-style-type:none;
list-style-position:outside;
display:inline-block;
font-weight: bold;
line-height:1.5em;
float: none;
}
#nav-wrapper {
text-align: center;
}
#nav ul{
Z-INDEX: 10;
text-align:center;
position:relative;
...
}
...