Fix Next.js Responsive Layout Bug

I have a Next.js front-end that renders perfectly on tablets, but the page layout breaks on mobile phones and large desktop screens. The issue is purely responsive: certain sections overlap or fall out of the grid whenever the viewport is below 480 px or wider than 1400 px, while everything between those sizes behaves as expected.

I need you to dive into the layout files (Tailwind is already configured, though plain CSS or styled-JSX overrides are acceptable) and correct whatever is throwing off the responsiveness. No new features—just a clean, stable layout that scales from the smallest phone up to 4K monitors.

Acceptance will be straightforward:
• Commit/fork or patch file that eliminates the visual glitches on mobile and desktop breakpoints without introducing regressions on tablet sizes.
• A short note outlining what was changed and why, so I can keep future merges conflict-free.

If this sounds routine for you, let’s get the fix merged today.