Many times it is very annoying when you are designing a page and suddenly you notice that something is not properly aligned.
In these cases, it can be helpful to outline elements on the page to figure out how they are being rendered in relation to one another. One solution would be to write your own css class, such as the following:
* { box-shadow: inset 0 0 0 1px red }
However, a better and more convenient way is to use the Web Developer browser extension available for Chrome, Firefox and Opera.
For example, in the following image you can see all the block elements outlined using the Firefox version of the extension:
Of cource, you can always resort to Firebug plugin or/and Chrome DevTools. Another good idea might be to use a validation tool such as the W3C markup validation service, the W3C CSS validator or CSS Lint.