Validators and linting tools
Generally speaking, writing HTML and CSS is pretty forgiving. You can nest the odd thing incorrectly, miss the occasional quotation mark or self-closing tag and not always notice a problem. Despite this, on an almost weekly basis I manage to befuddle myself with incorrect markup. Sometimes it's a slip-up like accidentally typing an errant character. Other times it's school-boy errors like nesting a div
inside a span
(invalid markup as a span
is an inline element and a div
is a block level element—leading to unpredictable results). Thankfully, there are great tools to help out. At worst, if you're encountering a weird issue, head over to http://validator.w3.org/ and paste your markup in there. It will point out all errors along with line numbers, helping you to easily fix things up.

Better still, install and configure 'linting' tools for your HTML, CSS, and JavaScript. Or, choose a text editor with some degree of sanity-checking built in. Then problem areas are...