Question

<div id="navMenu">
    <div id="navigation_horiz">
        <ul>
            <li>
                <a href="" class="navlink">Find a Doctor</a>
            </li>
            <li>
                <a href="" class="navlink">Why Interfaith</a>
                <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>
                <a href="" class="navlink">Medical Services</a>
                <div class="dropdown" id="dropdown_one">
                    <div class="test" style="padding: 10px;">
                        <a href="#">Behavioral Health</a>
                    </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>
                <a href="" class="navlink">Medical Trainings</a>
                <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>
                <a href="" class="navlink">For Patients & Visitors</a>
                <div class="dropdown" id="dropdown_three">
                    <p>
                        <a href="#">This is a Link</a>
                    </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>
                <a href="" class="navlink">Contact Us</a>
            </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; }