Need help matching layout

- How to best set up the header graphics?  (logo, guys, soc. media icons + red BG color gradient)  - full size & responsive

If you want responsive layout, you have options of using a framework like Foundation or Bootstrap, or using the CSS Grid. Then it's a matter of placing your elements within that grid and determining how you want your responsive version to render.  Based on your comps, I don't see a mobile version to comment enough on tips to render your layout.

- I want the nav below header like the comp, but struggling ATM...

Think of a grid like a table. The nav below the header is just another row of content.

- How to fill the content space with the main image (BG-main-image.jpg). Is there a better way (eg. in the html) than to make it a background image using CSS?

I would simplify your header - one transparent PNG image with a CSS gradient background to get the desired effect.

- How to float social media icons top right?

See response to the best setup for header graphics. This is determined by the code base you are choosing.

- How to best get 2 guys pic in header - merged or standalone?

See response to fill content space.

Just a few remarks:

• Have a look at these pointers regarding headers and the role attributes: Showing results for http://larrysullivandesign.com/GIT480/index.html - Nu Html Checker
• Use the F12 key to look for other problems such as
  
• Ask one question at a time to get an answer.