How Do I Debug A CSS Layout?

Open the Contact menu in this navbar, and you'll notice it's a bit off to the right.

1. Why is this?
2. How can I debug these issues myself without asking silly questions开发者_如何学C on SO? I'm using Firebug's layout tool, but I didn't really understand from it why this is happening.

what K Ivanov said..
and please consider using in browser tools to debug those things.
There are:

• developer tools in IE
• FireBug addon for firefox
• and developer tools in chrome

and for the hometask research "css reset"
Different browsers have different default styles for elements for documents with no styles defined to look semi decent. Those styles do include padding and margins as well. That's why you have padding where you did not reset it.

make padding-left: 0px; inside your css element #wd-navbar ul

Here's a video explaining how to use firebug to debug CSS: http://www.youtube.com/watch?v=pDhhM4-o_VE&feature=player_embedded#at=313

Of course, you need to understand the basics of CSS and the box model first: http://www.w3schools.com/css/css_boxmodel.asp

And now there's a new tool to visualize the space taken up by any element you put the mouse over:

HTML Box Visualizer - GitHub