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.
No description
1 Reply
clevermissfox
clevermissfoxβ€’2mo ago
use padding instead of margin in between and put the bg color on your header/nav and hero within the main pseudo-elements with an inset of 0 will also fit within the element so if the element is responsive, the pseudo element will grow and shrink with it