Skilled e-learning landing page using CSS and HTML

This is my first submission of the skills landing page. I found this challenge very challenging, and learned a great deal, especially about image responsiveness and art direction markup strategies. There are still a few problems I'm seeking feedback on:

1. I managed to get the hero section image position perfect using positioning (absolute) and pushing it outside the page with negative margins. This messed with my responsiveness so I opted for flexbox, with parent containing both the hero test and image. I want to know if I can get the header to overlap the hero div so that the hero image is positioned as per the challenge spec. How would I do that, or is there a better way (I hope there is a better way, this was a pain!).

2. Related to the first, I tried z indexing between the header and hero-section to get them to overlap, but couldn't figure it out and if the image overlaps the header it removes the "get started" link access (covers over it so you can't click). Need some help there but if I can solve the first it will probably solve the second.