NO padding issue inside the DIV - css

Question

<div id="navMenu">
<div id="navigation_horiz">
<ul>
<li>
Find a Doctor
</li>
<li>
Why Interfaith
<div class="dropdown" id="dropdown_one">
<div class="test" style="padding: 10px;">History & Mission</div>
<div class="test" style="padding: 10px;">Executive Director</div>
<div class="test" style="padding: 10px;">Career Opportunities</div>
<div class="test" style="padding: 10px;">News & Events</div>
</div>
<!-- .dropdown_menu -->
</li>
<li>
Medical Services
<div class="dropdown" id="dropdown_one">
<div class="test" style="padding: 10px;">
Behavioral Health
</div>
<div class="test" style="padding: 10px;">Clinical Laboratory</div>
<div class="test" style="padding: 10px;">Dentistry</div>
<div class="test" style="padding: 10px;">Emergency</div>
<div class="test" style="padding: 10px;">Gynecology</div>
<div class="test" style="padding: 10px;">Medicine</div>
<div class="test" style="padding: 10px;">Pastoral</div>
<div class="test" style="padding: 10px;">Pediatrics</div>
<div class="test" style="padding: 10px;">Physical Medicine & Rehab</div>
<div class="test" style="padding: 10px;">Radiology</div>
<div class="test" style="padding: 10px;">Surgery</div>
<div class="test" style="padding: 10px;">Other Services</div>
</div>
<!-- .dropdown_menu -->
</li>
<li>
Medical Trainings
<div class="dropdown" id="dropdown_one">
<div class="test" style="padding: 10px;">Medical Training</div>
<div class="test" style="padding: 10px;">Behavioral Health</div>
<div class="test" style="padding: 10px;">Predoctoral Externship</div>
<div class="test" style="padding: 10px;">Podiatric Residency</div>
<div class="test" style="padding: 10px;">Dental Residency</div>
<div class="test" style="padding: 10px;">Pulmonary Residency</div>
</div>
<!-- .dropdown_menu -->
</li>
<li>
For Patients & Visitors
<div class="dropdown" id="dropdown_three">
<p>
This is a Link
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit
sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam,
a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed
massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod.</p>
</div>
<!-- .dropdown_menu -->
</li>
<li>
Contact Us
</li>
</ul>
</div>
<!-- #navigation_horiz -->
</div>
<!-- END NAVIGATION -->
And i have the following CSS:
#navMenu {
width: 960px;
height: 50px;
border: 1px solid black;
}
/* * {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; line-height:16px} */
.container {margin:0px auto; width:960px; background:#fff; padding:0px;}
/* ----------------------------------------------------- */
/* navigation styles - BEGIN */
/* style for horizontal nav */
#navigation_horiz {width:960px; clear:both; padding:0 0 0 0; margin:0 auto}
#navigation_horiz ul {height:40px; display:block}
#navigation_horiz ul li {display:block; float:left; width:160px; height:40px; background:#999; margin:0 1px 0 0; position:relative}
#navigation_horiz ul li a.navlink {display:block; width:160px; height:35px; padding: 12px 0 0 0; text-align:center; color:#fff; text-decoration:none}
#navigation_horiz .dropdown {position:absolute; padding:5px 10px 5px 10px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-bottomleft:10px}
/* style for each drop down - horizontal */
#navigation_horiz ul li #dropdown_one {background:#ccc; color:#fff}
#navigation_horiz ul li #dropdown_one a {color:red}
#navigation_horiz ul li #dropdown_two {background:#ccc; color:#fff}
#navigation_horiz ul li #dropdown_two a {color:black}
#navigation_horiz ul li #dropdown_three {background:#ccc; color:#fff}
#navigation_horiz ul li #dropdown_three a {color:gray}
For some reason the UL list is coming in the center instead of starting from LEFT of the DIV and stretch all the way to the right. you can see what it looks like here: http://i46.tinypic.com/2wnz7g1.gif
Any idea?
Thanks

Answer 1

ul has 40px padding-left by default, set padding: 0; and it will fix the horizontal position.
ul { padding: 0; }

Answer 2

Apply margin:0 (instead of margin: 0 1px 0 0) to #navigation_horiz ul li as well as #navigation_horiz ul (assuming you aren't using a css reset; also add padding:0 to the ul as well.)
Here: jsFiddlyFooFoo

Answer 3

User agent styles usually have padding and margin on ul just remove them
#navMenu ul{
padding: 0;
margin: 0;
}
Also your li take up more width than the ul so it wraps, you add 1px magin to each li so 1x6=6 extra pixels
http://jsfiddle.net/EJttX/1/