I'm not a complete newbie with html but with this responsive html5 and css3 I may as well be. I'm looking for some input or at least keywords on how to modify some of the things I'm having difficultly with. I'm knowledgeable enough with web dev to handle most of this but just need some pointers. If I don't know the proper terminology I'll never get the google results I need.
This may be more of a CSS3 issue so maybe I should post this in the css forum.

I'm working modifying this template: http://html5templates.com/heavy-industry for a specific business. I've replaced the original "Heavy Industry.. " text logo in the header with a logo image but can't get it to position like I want. The logo also doesn't resize for the phone.
It appears to have a large top margin that won't let the logo be any bigger or go any higher than the top of the menu buttons. If I make the logo any bigger it starts disappearing underneath the wrapper below the header underneath the gray.

Any advise is greatly appreciated. Don't expect to be spoon fed. I'll post some screenshots somewhere if needed.