Links inside list items have a height greater than the list element - what's going on?

Question

I have a nav containing a list of links. The list has a line-height: 1em. However the links have a height greater than 1em and overlap the

Answer 1

Just add display: inline-block to your a elements.

Anchor tags are naturally inlined by user agent stylesheets which is what's causing your overflow.