Stretch Div Inside Header 100%

I am trying to get 2 colors within the header area. The first is one color the main wrapper, the 2nd div within the header is another color. It stretches across to right side but not all the way through to the left side in IE9 and FF18. there is a 5 to 10px margin on left.


<div id="mo_header_wrapper">
	<div id="mo_header" class="wrapper">
        <div id="mo_menu" class="ddhmenu">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">Home</a>  </li>
                <li><a href="portfolio.html">Home</a> </li>
                <li><a class="search" href="search.html">Home</a></li>
                <li><a class="listings" href="contact.html">Home</a></li>
                <li><a  class="selected" href="contact.html">Home</a></li>
            </ul>
            <br style="clear: left" />
        </div> <!-- end of mo_menu -->
    </div>
</div>



#mo_header {
	height: 80px;
	width:100%;
	
}
 #mo_header_wrapper {
	width: 100%;
	background-color:#red;
	height:380px;	
}


.wrapper {
	width: 960px;
	padding: 0 10px;
	margin: 0 auto;
}



#mo_menu { float:right; margin-top: 20px; }


.ddhmenu {
	width:100%;
	background-color:#green;
	padding-top:10px;
	border:solid 1px #ffffff;
}


First thing, don’t use # before color names:

background-color:#red;
background-color:#green;

The gap on the left is caused by this:

.wrapper {
width: 960px;
padding: 0 [COLOR="#FF0000"]10px[/COLOR];
margin: 0 auto;
}

lukkas, delete the “#” in front of the colors written as words.



#mo_header_wrapper {
	width: 100%;
	background-color:[color=red]#[/color]red;

.ddhmenu {
	width:100%;
	background-color:[color=red]#[/color]green;


Then delete the following properties:


.wrapper { 
	width: 960px;
	[color=red]padding: 0 10px;[/color]    /* DELETE the horizontal paddng */
	margin: 0 auto;
}

.ddhmenu {
	width:100%;
	background-color:green;
	padding-top:10px;
	[color=red]border:solid 1px #ffffff;[/color]    /* DELETE the horizontal border */
}

The horizontal values of padding and border are affecting the width and position of the inner div.

Off Topic:

EDIT: I seem to be running about 3-5 mins behind. :confused: Global time warp? … internet slowing? :nono: (ninja’d by Ralph) (:

the padding solution did fix it.

Thanks