🩹 [Patch]: Docs - Use full width

[MariusStorhaug]

Describe the change

To align the left and right menus to the far left and right in a Material for MkDocs site, effectively utilizing the entire width of the screen, you'll need to override the default CSS styles.

Here's how you can do it step-by-step:

---

Step 1: Create an Override CSS file

In your MkDocs project, add a new CSS file:

docs/
└── stylesheets/
    └── extra.css

---

Step 2: Edit the CSS to Adjust the Widths

Add the following CSS rules to extra.css to maximize the usage of screen width:

/* Make the site container full width */
.md-grid {
    max-width: 100%;
}

/* Adjust sidebars to align to far left and far right */
.md-sidebar--primary {
    left: 0;
}

.md-sidebar--secondary {
    right: 0;
}

/* Ensure the main content fully utilizes available width */
.md-content {
    max-width: none;
}

You may need to further tweak the padding or margins to fit your exact aesthetic preferences.

---

Step 3: Update mkdocs.yml

Include this new stylesheet in your MkDocs configuration file (mkdocs.yml):

extra_css:
  - stylesheets/extra.css

---

Step 4: Rebuild and Check Your Site

Rebuild your site and preview the changes:

mkdocs serve

Visit the URL (usually http://localhost:8000) to verify that menus and content now span the full width of your screen.

---

Additional Customization (Optional)

If further tweaking is needed (e.g., spacing, padding), you can adjust it in your extra.css.

For example, to add padding to ensure content doesn't stick directly to edges:

.md-content {
    padding-left: 2rem;
    padding-right: 2rem;
}

---

Notes:

• Modifying CSS in this way is safe and won't be overwritten by Material theme updates.
• Always preview your site on multiple screen sizes to ensure responsiveness.

That's it! Your menus should now be fully aligned to the far edges, maximizing screen width.