The overlapping on the bottom is caused by your navigation's <li> and <a> elements being inline, combined with the top/bottom padding the <a>'s have. The quickest fix is to set them to "display:inline-block" rather than "inline", but you may have to mess with it.
The overlapping on top is beyond my expertise; I think it's caused by the line-height being exactly the same as the font-size (so the
lower-hanging bits "descenders" on the letters stick out a little). But now we're getting into "inline formatting model" territory, which I don't understand a whole lot (as I recently demonstrated).
I really like the way you did those banners along the bottom, indicating the sizes...