Improve layout and styling of the demos page

[bbjbc]

Description

Hello leeoniya!

This PR introduces a change to improve the readability and overall user experience of the main demos page.

Motivation

Currently, the list of demos is aligned to the far left of the page. On wider screens, this can make it less comfortable to view, as the user's focus is pulled to one side.

By centering the main content block, the page feels more balanced and is ergonomically easier to read.

Changes

To achieve this, I have made the following changes.

1. Wrapped the page content in a <main class="container"> element.
2. Applied CSS to the .container to set a max-width and center it on the page using margin: 0 auto. This makes the layout responsive and readable on all screen sizes.
3. Added simple styling to these sections (background-color, padding, border-radius) to visually separate the categories and make the page more organized.
4. Centered the main <h1> title to match the new centered layout.
5. Additionally, I've named the first section heading to Variety. I felt this word better captures the diverse nature of the demos in that group. I'm open to feedback on this as well.

Result

Here is a quick look at the visual change.

Before	After

I believe this makes the page look cleaner and more modern. Of course, I'm completely open to feedback on the styling. If this approach doesn't align with the project's vision (ex. no-css, no-style), please feel free to close this PR.

Thank you for your time and for creating such a great library!