Question

My HTML

<div id="main_navigation">
    <ul><li><a href="/One">One</li></a><li><a href="/Two">Two</li></a><li><a href="/three">Three</li></a>
    </ul>
</div>

My CSS

#main_navigation ul {
margin: 10px 0 15px 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#main_navigation ul li {
display: inline;
font-size:24px;
}

#main_navigation ul li a {
text-decoration: none;
padding: .2em 1em;
color: #cbc19e;
background-color: #322918;
}

#main_navigation ul li a:hover {
color: #322918;
background-color: #cbc19e;
}

This looks perfect EXCEPT it does not quite stretch out to the full width of the rest of the objects on the page. The container has:

margin:0 50px 0 50px;

as do all of the other containers on the page. The only one that does not stretch the full width is the nav bar. I would not like to use tables or jscript if possible. Suggestions?

Answer 1

#main_navigation ul li {
  display: inline-block;
  font-size:24px;
}

#main_navigation ul li a {
  text-decoration: none;
  padding: .2em 1em;
  color: #cbc19e;
  background-color: #322918;
  width: 200px;
  display: block;
}

Change the display attribute to inline-block and block respectively, and set width to whatever you want.