I'm working on a general template right now just practicing working with responsive layout techniques. I haven't gotten too far with the layout but I'm having problems with the navigation bar once it gets up to a screen size between 480 and 768px. I think I just haven't fully mastered the floats and positioning with css because I just don't quite understand why it's not working. It will first be a vertical menu on small screens and then move up to a horizontal nav bar that I wanted to have it be 100% of the window and the links be centered within the nav bar. So I'm having a problem the text above and below the nav bar. For some reason the subheading and second level heading are overlapping with the nav bar and I'm not exactly sure why. Normally I'd probably just keep adding margin heights to make it look right but I'd like to do this right and understand why it's doing what it's doing.

Here's the URL where I uploaded my files. http://www.capescafe.com/templates/ Let me know if you need me to paste any code in here. Actually it looks like the top heading may be overlapping the navigation a little bit on the desktop layout also.