HTML, CSS - Background Color Doesn't Stretch the Full Length of Inner Div's Width

Question

I have a div sitting inside of another div, and the background color of the inner div will not stretch for the full length specified by div's width property in css. I have tried using min-width:960px, width:100%, and width:960px, but the background continues to constrain to the contents of the div.

Here is the css

#wrapper-content {
width:960px;
margin: 0 auto;
font-family:arial;
}

#header {
width: 960px;
height: 150px;
background: cyan;
}

#image-logo {
height:49px;
width:374px;
}

#menu-main {
width:960px;
background:blue;
}

#menu-main li {
    display:inline;
}

.menu-main-item {
    width:6em; 
    text-decoration:none; 
    float:left; 
    color:white; 
    background-color:blue; 
    padding:0.8em 0.6em 0.8em 2.4em;
}

Here is the HTML

<div id="wrapper-content"> <!--Beginning of Content Wrapper-->


<div id="header">

    <img id="image-logo" src="" alt="Image Logo">

    <span style="float:right; font-size:37px;">(888) 555-5555</span><br>
    <span style="float:right; font-size:16px">123 Anywhere Ave</span><br>
    <span style="float:right; font-size:16px">Somewhere, NY 10001</span>

</div>

<div id="menu-main">
<ul style="margin:0; padding:0;">
    <li><a class="menu-main-item" href="index">Home</a></li>
    <li><a class="menu-main-item" href="services">Services</a></li>
    <li><a class="menu-main-item" href="library">Library</a></li>
    <li><a class="menu-main-item" href="about">About</a></li>
    <li><a class="menu-main-item" href="contact">Contact</a></li>
</ul>
</div>

</div> <!--End of Wrapper-->

I've also created a JSFiddle for example: http://jsfiddle.net/P88e2/1/

The div with an ID of #menu-main has a dark blue background which does not stretch all the way. Any help stretching the background color the full width of the div is appreciated....

Answer 1

Try doing this change in your CSS:

#menu-main li {
    display: inline-block;
}