How can I make the header area not overlap at http://androdevlab.com when viewed in a mobile browser?
You should use media queries. You can read more about media queries here:
http://www.w3.org/TR/css3-mediaqueries/
http://reference.sitepoint.com/css/mediaqueries
You can also use plugins like FitText.js - http://fittextjs.com/
Looking at the code for your site in Firebug, the main issue is that the line-height of the line 'A portable lab in NYC of Android devices delivered to your door' is too big. It's currently at '1.8' without a value. Try setting it to a smaller value of maybe 1em or 1.25em. Likewise for the nav-primary li a class.
Also, the width of the nav element is defined as 980px so on any device, this would be a fixed value. Maybe you can try setting a % or em based value.
If you need to change many elements for the mobile version while keeping the @screen CSS the same, you should use media queries. Makes things much easier to handle.