Question

I am trying to code a page, and for some reason i have a random css spacing issue for my list that i created. On the bottom right i have a random space between the list and its div.

I am styling it fine i think but my code is here at jsFiddle

and it works fine there for some reason. Any ideas?

If needed i can supply the entire page link.

I want that whole entire css list to span accross the entire div but it has a huge gap between the left wall of the div and its list.

Answer 1

The list on the page you link to needs to have its padding (and potentially its margin … some browsers have different default styles) cleared. Here are some rules you could use to fix this:

#navlist {
    list-style-type: none; /* Removes default list style */
    margin: 0;
    padding: 0;
}

I highly recommend getting the Firebug extension for Firefox. It makes debugging layout issues like this very easy. It also helps you see whether the style rules you are writing are being overridden by a more specific rule elsewhere in your style sheet.

As an aside, you shouldn’t be using the center element. That element has been deprecated, and should be handled via your style sheet like so: text-align: center;