Yet another person asking how to center a navigation bar - html

Question

I have tried probably 15 suggestions from stackoverflow on how to center nav. Can you help? I just want to center the nav and be able to hover over Expertise without the rest of the nav bar getting jumbled around.
Here is my markup:
<nav id="header-home-nav">
<div id="menu">
<ul>
<li id="" class="">About</li>
<li id="line-li"><p class="nav-lines">|</p></li>
<li id="" class="">Contact</li>
<li id="" class=""><p class="nav-lines">|</p></li>
<li id="" class="">Expertise
<ul id="" class="sub-menu">
<li>▶ Finance</li>
<li>▶ Operations</li>
<li>▶ Capital Management</li>
<li>▶ Capital Management</li>
<li>▶ Capital Management</li>
<li>▶ Capital Management</li>
<li>▶ Capital Management</li>
<li>▶ Capital Management</li>
</ul>
</li>
</ul>
</div>
</nav>
css:
#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
overflow: visible;
z-index: 2;
height: 35px;
width:100%;
}
#menu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
z-index: 3;
width:100%;
background-color: #666666;
}
#menu li {
background-color: #1b1b1b;
display: block;
float: left;
position:relative;
}
#menu a {
color: #ffffff;
display: block;
text-align: center;
text-decoration: none;
margin: 0;
padding: 10px 20px;
}
#menu a:hover {
color: #000000;
margin: 5px 10px;
padding: 5px 10px;
background-color: #C0C0C0;
border-radius: 10px;
}
#menu ul.sub-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
z-index:100;
}
#menu ul.sub-menu li {
width: 200px;
background-color: #C0C0C0;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #666666;
z-index:5;
}
#menu ul.sub-menu li a {
color: #000;
text-align: center;
margin: 5px 10px;
padding: 5px 10px;
text-align: left;
}
#menu ul.sub-menu li a:hover {
color: snow;
background-color: #666666;
}
#menu li:hover ul.sub-menu {
display: block;
z-index: 90;
}
EDIT:
Here is a jsfiddle:
http://jsfiddle.net/8A9tq/
Sorry, forgot to add it.
EDIT:
Responsive is important. So I needs to be centered regardless of screen size.

Answer 1

You can add the following:
#header-home-nav {
width: 100%;
}
Then, give the child (#menu) some kind of max-width and auto margins:
#menu {
background: #1B1B1B;
margin: 0 auto;
max-width: 300px;
position: relative;
font-size: 0.8em;
padding: 0;
overflow: visible;
z-index: 2;
height: 35px;
}

Answer 2

This seems to work: http://jsfiddle.net/4Eqad/
#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
overflow: visible;
z-index: 2;
height: 35px;
width:100%;
margin-left:25%;
}
Note the new edition is the margin-left:25%. You can make that whatever you would like.

Answer 3

Nav centered: http://jsfiddle.net/8A9tq/1/
To center an element you need three things: a set (non-percentage) width, block display (automatic with block level elements, but it's a good practice anyway), and your left and right margins to be set to auto:
width: 300px;
display: block;
margin: 0 auto;
So for your example, depending on which element you want to center you could try:
#menu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
z-index: 3;
width: 300px;
display:block;
margin: 0 auto;
background-color: #666666;
}
or
#menu {
position: relative;
font-size: 0.8em;
margin: 0 auto;
padding: 0;
overflow: visible;
z-index: 2;
height: 35px;
width:300px;
display:block;
}
and so on

Answer 4

Here you can keep your markup and just says to the position has to be 50% left and 50% right.
#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
overflow: visible;
z-index: 2;
height: 35px;
width:100%;
left: 50%;
right: 50%;
}
Fiddle: http://jsfiddle.net/uPs8J/2/