Back in the good old days of coding websites, a lot was done by trial and error. You would assign styles to objects on your web page and hope everything would come together as you envisioned. Without fail, styling issues would arise, and as the website grew larger it was a headache to figure out what style was affecting what HTML object.
Where the heck is that extra padding coming from!?!
Bless the day that I heard about Firebug, an add-on for Firefox that allows you to highlight different HTML objects on your page and see the styles associated with that object. See that 10px extra padding on your image? That’s coming from line 131 of your styles.css file.