从navbar UL css删除填充

Question

I am working on something and keep getting some padding on my css navabar, its pretty simple but I cant figure out where it grabbing the padding from pushing it about 5 pixels to the right.

Here is a JSFiddle

Notice the little gray space in between the hovered over Update Profile?

I cant seem to find the css anywhere that would cause that. Anyone notice anything in my code? CSS:

body {
            margin: 20px;
            font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
            background-color: #555;
        }
        #nav {
            text-align: center;
        }
        /* Begin Navigation Bar Styling */
        #nav ul {
            text-align: center;
            font-size: 11px;
            width: 100%;
            margin: 0;
            padding: 0;
            display: inline-block;
            padding: 0;
            list-style: none;
            background-color: #f2f2f2;
            border-bottom: 1px solid #ccc;
            border-top: 1px solid #ccc;
        }
        #nav li {
            display: inline-block;
        }
        #nav li a {
            display: block;
            padding: 8px 15px;
            text-decoration: none;
            font-weight: bold;
            color: #069;
            border-right: 1px solid #ccc;
        }
        #nav li a:hover {
            color: #c00;
            background-color: #fff;
        }
        /* End navigation bar styling. */
        div {
            text-align: center;
        }
        div#page {
            background-color: white;
            margin: 0 auto;
            text-align: left;
            width: 755px;
            padding: 0px 10px 0 10px;
        }
        div#header {
            border-bottom: 1px solid black;
            height: 30px;
            line-height: 30px;
        }
        div#content {
            background: none repeat scroll 0 0 none;
            border: 0px solid blue;
            width: 100%;
            line-height: 500px;
            min-height: 500px;
            _height: 500px
        }
        div#footer {
            border: 0px solid red;
            height: 30px;
            line-height: 30px;
            border-top: 1px solid black;
            font-size: 9pt;
        }

HTML:

<div id="page">

            <div id="header">



                <div style="float: left;">Welcome Admin</div>

                <div style="float: right;">LOGOUT</div>

                <div id="nav">



                    <ul id="nav">

                        <li><a href="#">Home Page</a>
                        </li>

                        <li><a href="#">My Account</a>
                        </li>

                        <li><a href="#">Update Profile</a>
                        </li>

                        <li><a href="#">Change Avatar</a>
                        </li>

                        <li><a href="#">Change Password</a>
                        </li>

                        <li><a href="#">Support</a>
                        </li>



                    </ul>

                </div>

            </div>

            <div id="content">Content</div>

            <div id="footer">
                <div style="float: right;">copyright 2014</div>
            </div>

        </div>

Answer 1

Make the following changes in css for #nav li :

#nav li {
  float: left;
}

Removed display:inline-block; and replaced it with float: left; property.

Update according to @Bokdem's comment

Keep the css as is:

#nav li {
  display: inline-block;
}

And write the content in ul tag in single line, like:

<li><a href="#">Home Page</a></li><li><a href="#">My Account</a></li><li><a href="#">Update Profile</a></li><li><a href="#">Change Avatar</a></li><li><a href="#">Change Password</a></li><li><a href="#">Support</a></li>

This will eliminate the extra space.

Or

#nav li {
  display: inline-block;
  margin-left: -4px;
}

Or

Write the content in ul tag as:

<li><a href="#">Home Page</a></li><!--
--><li><a href="#">My Account</a></li><!--
--><li><a href="#">Update Profile</a></li><!--
--><li><a href="#">Change Avatar</a></li><!--
--><li><a href="#">Change Password</a></li><!--
--><li><a href="#">Support</a></li>

Answer 2

If you use inline-block element it leaves a gap between successive elements.

Option 1

You can remove this gap by adding a negative margin. In your case-

#nav li {
    margin-right: -3px;
}

DEMO 1

Option 2

You can omit the gap by commenting out white-spaces on your HTML.

<ul id="nav">
    <li><a href="#">Home Page</a>
    </li><!--
    --><li><a href="#">My Account</a>
    </li><!--
    --><li><a href="#">Update Profile</a>
    </li><!--
    --><li><a href="#">Change Avatar</a>
    </li><!--
    --><li><a href="#">Change Password</a>
    </li><!--
    --><li><a href="#">Support</a>
    </li>
</ul>

It does look funky but it works :)

DEMO 2