I am facing a challenge in my web design project and seeking some assistance. My page structure involves nested layout grids and sections. Here are the details:
I have used a layout grid, inside which I placed a section.
This section contains an image, followed by a flex grid below it.
Beneath that, I added another grid section.
In the preview mode, these elements are overlapping each other, disrupting the intended appearance of the page.
I have already checked the hierarchy and CSS classes, but the issue persists. Could someone suggest what might be causing this behavior and how I can resolve it? Could the problem be due to a conflict between the CSS properties for grid and flexbox?
Thank you in advance for any help.
images : https://ibb.co/4py6HfG
https://ibb.co/GTfGqD9