Needing help with the responsiveness of my survey form

Hi all, having issues with my survey form.

Can anyone help me figure out why the .bg-header keeps cutting off and making the horizontal scroll happen on smaller views instead of resizing? I’ve defined max-width as 100% in a media query so it should take up the whole page… What am I missing?

Pen is here: