I have been facing an issue with my website where it appears fine on desktop screens but doesn't adjust properly on smaller devices like mobile phones. I've tried using "clamp" for the width property in CSS, but the problem persists. The content overflows to the right of the screen and the elements are not centered as expected.
Here is a snippet of the code:
:root {
--main-color: #087830;
--secondary-color: #e7ffdb;
--dark-color: #444;
--light-color: #fafafa
}
/* Rest of the CSS code goes here */
@media screen and (max-width:1020px) {
/* Media query styles go here */
}You can see that there is a navigation menu, a hero section with some content and an image. How can I make this code responsive?