Horizontal Overflow Issue in Responsive Design with Temporary overflow-x-hidden Fix

[olcanebrem]

Hi ,

I’ve noticed a horizontal overflow issue on the index.astro page, especially when the screen width decreases. This causes a horizontal scrollbar, disrupting the user experience. The issue is most prominent in the services, recent posts, and footer sections, among others. As a temporary fix, I added overflow-x-hidden to the body in component.scss, which hides the overflow (a few pixels) and removes the scrollbar. However, I’m concerned this is not a sustainable solution as it masks the root cause.

Steps to Reproduce
Open the website in a browser.
Navigate to the homepage (index.astro).
Resize the browser to a smaller width (e.g., 320px or 768px).
Observe the horizontal scrollbar, especially in services, recent posts, and footer.
Expected Behavior
No horizontal scrollbar should appear at any screen size.
Content should stay within the container (max-w-[1202px]) and adapt responsively.
Actual Behavior
A horizontal scrollbar appears due to minor overflow (a few pixels).
The issue is noticeable in gx-5 row classes and elements like images/videos.