How to make a responsive color design with image.

I am doing a frontend mentor project. There is a background-color for the nav and hero section. However, I do not know how to achieve that because nav is in the </header>, hero section is in the </main>, which I cannot apply a background-color-class, there is also margin between.

I tried to use pseudo elements and absolute value, but it is just too hard to make it responsive.

I tried applying it on body, but it will take up the whole site.

Anybody can guide me how to achieve this background-color design.
mobile-design.jpg
Was this page helpful?