Bug report: Mobile layout breaks on homepage (large side margins, content squeezed)

[Ramanand87]

When viewing the homepage on mobile-sized screens, the layout does not render correctly. The main content is squeezed into a narrow vertical column with large empty margins on both sides, and the hero section text appears clipped.

This makes the site difficult to read and navigate on mobile devices.

Steps to Reproduce

• Open https://tour.json-schema.org/
• Open browser dev tools
• Switch to a mobile device preset (e.g., iPhone 12 Pro, width ~390px)
• Reload the page
• Observe that the content is constrained to a thin column with large margins instead of using the full width

Expected Behavior:

• Content should span the available mobile width
• Hero section and lesson list should be properly centered
• No excessive side margins
• Responsive layout should adapt to small screens

[Ramanand87]

I am ready to work on this issue.