Responsive Landing Page - HTML CSS Grid

What challenges did you encounter, and how did you overcome them?

I had issues with the hero image so I asked Chat-GPT and this code fixed my issues.

.overflow-wrapper {
    overflow-x: hidden;
    position: relative;
}

serves two main purposes when dealing with a hero image that has negative margins:

1. Prevents Horizontal Scrollbars: By setting overflow-x: hidden, it hides any horizontal overflow content that might otherwise extend beyond the viewport. Negative margins on the hero image can push content outside the normal bounds of the page, which could cause unwanted horizontal scrollbars. This rule ensures that any content extending outside the viewport horizontally is clipped, avoiding those scrollbars.

2. Maintains Positioning Context: By setting position: relative, you ensure that the .overflow-wrapper creates a new containing block for absolutely positioned elements inside it (such as the hero image, if needed). This keeps the positioning of child elements relative to this wrapper, which helps prevent layout shifts or unexpected behavior caused by the negative margins of the hero image.

Together, these properties ensure that the layout remains visually contained without any unwanted overflow or positioning issues, making the design more robust and clean.