Make **ALL** websites in Chrome stretch their content to actually fit the screen width (as in: remove all horizontal space on left/right of ALL pages)

Question

The issue

I'm seeing a lot of websites these days with unused or empty space taking up 1/3 or more of the horizontal width of web pages.

What I'm looking for

I'm trying to figure out if there is a way to remove or decrease the unused horizontal space on webpages. This occurs for many reasons but typically it's due to:

1. An HTML element that specifies the max-width CSS property.
2. An HTML element or one of it's classes is referenced in a @media (max-width: <pixel-amount>) query.

---

Examples

Example 1

The absolute perfect example is https://stackoverflow.com
Here is an image of what I see to be even more clear about the problem:

---

Example 2

Here is a stackoverflow example where I think it would be very helpful if I could read/see more of the accepted answer without having to scroll up/down constantly.
The main content of the page (question/answer section) only takes up 34% of the pages width at 100% zoom in Chrome 92 when I am full screen with a 1920x1080 resolution.
Link to page in this example image

---

What I've tried

Using the uBlock Origin browser extension I can block elements from appearing on a web page. Depending on how the sites HTML is structured, this occasionally yields the desired effect. It may be possible to block a specific elements CSS property with uBlock Origin (currently trying to figure out).

---

Possible leads

The content width for many websites such as stackoverflow or stackexchange seems to stop increasing after a specified max-width media query. Or if an HTML element has the max-width CSS property set.

On stackoverflow.com, if I remove the class: body>.container max-width CSS property and do the same for the CSS selector: #content, this resolves the problem on stackoverflow but the changes are reset after reloading the page. I'm assuming solutions for other sites are probably very similar to this or require a change to a class that is referenced in a @media (max-width: <pixel-amount>) query.

Answer 1

You can permanently modify CCS properties of any site using uBlock Origin.

Open uBlock's options and go to filters and add the following to make stackoverflows content not have a max width:

• stackoverflow.com##.container:style(max-width: none !important)
• stackoverflow.com###content:style(max-width: none !important; width: 100% !important)

Don't forget to hit Apply Changes in uBlock!

You would do the same for other sites except you probably will need to change the site and class/selector Depending on your browser, the code might be a little different.

The Result