Weird element behavior with HTML5 and CSS3

Question

I am attempting to make a simple navigation bar using 4 images, wrapped inside an unordered list.

I am having issues, because the bar is not lining up, it is acting as if the parent div it is nested within has a padding-left assigned to it and pushing the unordered list to the right. Here's a picture of what is happening:

I have a border on the main navigation div to see what is going on.

Here is my code:

<div id="container">
    <div id="header">
      <h1 class="hidden">Blue Ridge Fencing</h1>
    </div>
  <div id="navigation">
    <ul>
        <li><img src="images/website_build/nav_bar/home.jpg" width="208" height="50" alt="Home" border="0"></li>
        <li><img src="images/website_build/nav_bar/about.jpg" width="227" height="50" alt="About" border="0"></li>
        <li><img src="images/website_build/nav_bar/contact_us.jpg" width="290" height="50" alt="Contact Us" border="0"></li>
        <li><img src="images/website_build/nav_bar/quote.jpg" width="235" height="50"    alt="Quote" border="0"></li>
    </ul>
  </div>
    <div id="content">

    </div>
</div>

And the CSS:

#navigation {
    height: 50px;
    width: 1000px;
    background-image: url(../images/backgrounds/otis_redding.png);
    overflow: hidden;
    padding: 0px;
    border: 1px solid #000;
}

#container #navigation ul {
    margin: 0px;
    list-style-type: none;
    font-size: 34px;
}

#container #navigation li {
    float: left;
}

Thank you in advance!

Answer 1

<ul> elements generally have default padding set by the browser (or one of your stylesheets). Just remove it:

#navigation ul {
    padding:0;
}

You might want to look into using a CSS reset if you haven't already:

• https://stackoverflow.com/questions/167531/is-it-ok-to-use-a-css-reset-stylesheet
• Why is there the need for browser resets?

Answer 2

You need to remove the padding from the ul element. You can do by adding padding: 0; to #container #navigation ul in your css.