diff --git a/exampleSite/content/basics/customization/_index.en.md b/exampleSite/content/basics/customization/_index.en.md
index 153b4dd005..dcbda7c9a1 100644
--- a/exampleSite/content/basics/customization/_index.en.md
+++ b/exampleSite/content/basics/customization/_index.en.md
@@ -160,6 +160,18 @@ If you want to adjust the menu width you can define the following CSS variables
 }
 ````
 
+## Change the Main Area's Max Width
+
+By default the main area width will only grow to a certain extent if more vertical screen space is available. This is done for readability purposes as long line are usually harder to read.
+
+If you are unhappy with the default, you can define the following CSS variable in your `custom-header.html` and set the value to your liking. If you want to use all available space, select a really big value like `1000rem`;
+
+````css
+:root {
+    --MAIN-WIDTH-MAX: 80.25rem;
+}
+````
+
 ## Own Shortcodes with JavaScript Dependencies
 
 Certain shortcodes make use of additional JavaScript files. The theme only loads these dependencies if the shortcode is used. To do so correctly the theme adds management code in various files.
diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md
index 0567eca2a5..154e40f8ae 100644
--- a/exampleSite/content/basics/migration/_index.en.md
+++ b/exampleSite/content/basics/migration/_index.en.md
@@ -20,6 +20,8 @@ This document shows you what's new in the latest release and flags it with one o
 
 ## 5.26.0.beta (XXX) {#5260}
 
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} It is now possible to [adjust the max width of the main area](basics/customization#change-the-main-areas-max-width), eg. in case you want to use the full page width for your content.
+
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} Images and Codefences are now respecting [Hugo's Markdown attributes](https://gohugo.io/content-management/markdown-attributes/).
 
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme has updated its Mermaid dependency to 10.6.0. This adds support for [block diagrams](shortcodes/mermaid#block-diagram).
diff --git a/static/css/theme.css b/static/css/theme.css
index 2a03435236..e0e8bcbcff 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -470,20 +470,18 @@ article a:focus > img:only-child:empty{
 #R-body .flex-block-wrapper {
     margin-left: auto;
     margin-right: auto;
-    max-width: calc( 81.25rem - var(--INTERNAL-MENU-WIDTH-L) - 2 * 3.25rem );
+    max-width: calc( var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 3.25rem );
     width: 100%;
 }
 body:not(.print) #R-body .narrow .flex-block-wrapper {
-    max-width: calc( 81.25rem - var(--INTERNAL-MENU-WIDTH-L) - 2 * 9.75rem );
+    max-width: calc( var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 9.75rem );
 }
 /* we limit width if we have large screens */
-@media screen and ( min-width: 81.25rem ){ /* #R-sidebar/width + ./max-width */
-    #R-body .flex-block-wrapper {
-        width: calc( 81.25rem - var(--INTERNAL-MENU-WIDTH-L) - 2 * 3.25rem );
-    }
-    body:not(.print) #R-body .narrow .flex-block-wrapper {
-        width: calc( 81.25rem - var(--INTERNAL-MENU-WIDTH-L) - 2 * 9.75rem );
-    }
+body.main-width-max #R-body .flex-block-wrapper {
+    width: calc( var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 3.25rem );
+}
+body.main-width-max:not(.print) #R-body .narrow .flex-block-wrapper {
+    width: calc( var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 9.75rem );
 }
 
 body:not(.print) #R-body-inner.narrow {
diff --git a/static/css/variant-internal.css b/static/css/variant-internal.css
index cea4eb4031..daa3932baf 100644
--- a/static/css/variant-internal.css
+++ b/static/css/variant-internal.css
@@ -112,4 +112,5 @@
     --INTERNAL-MENU-WIDTH-S: var(--MENU-WIDTH-S, 14.375rem);
     --INTERNAL-MENU-WIDTH-M: var(--MENU-WIDTH-M, 14.375rem);
     --INTERNAL-MENU-WIDTH-L: var(--MENU-WIDTH-L, 18.75rem);
+    --INTERNAL-MAIN-WIDTH-MAX: var(--MAIN-WIDTH-MAX, 81.25rem);
 }
diff --git a/static/js/theme.js b/static/js/theme.js
index fef8238c65..7356e81e4b 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -1601,9 +1601,9 @@ ready( function(){
         });
     }
     function moveTopbarButtons(){
-        var isS = body.classList.contains( 'width-s' );
-        var isM = body.classList.contains( 'width-m' );
-        var isL = body.classList.contains( 'width-l' );
+        var isS = body.classList.contains( 'menu-width-s' );
+        var isM = body.classList.contains( 'menu-width-m' );
+        var isL = body.classList.contains( 'menu-width-l' );
         // move buttons once, width has a distinct value
         if( isS && !isM && !isL ){
             moveAreaTopbarButtons( 's' )
@@ -1647,9 +1647,9 @@ ready( function(){
             }
         })
     }
-    function setWidthS(e){ body.classList[ e.matches ? "add" : "remove" ]( 'width-s' ); }
-    function setWidthM(e){ body.classList[ e.matches ? "add" : "remove" ]( 'width-m' ); }
-    function setWidthL(e){ body.classList[ e.matches ? "add" : "remove" ]( 'width-l' ); }
+    function setWidthS(e){ body.classList[ e.matches ? "add" : "remove" ]( 'menu-width-s' ); }
+    function setWidthM(e){ body.classList[ e.matches ? "add" : "remove" ]( 'menu-width-m' ); }
+    function setWidthL(e){ body.classList[ e.matches ? "add" : "remove" ]( 'menu-width-l' ); }
     function onWidthChange( setWidth, e ){
         setWidth( e );
         moveTopbarButtons();
@@ -1669,3 +1669,15 @@ ready( function(){
     moveTopbarButtons();
     adjustEmptyTopbarContents();
 })();
+
+(function(){
+    var body = document.querySelector( 'body' );
+    function setWidth(e){ body.classList[ e.matches ? "add" : "remove" ]( 'main-width-max' ); }
+    function onWidthChange( setWidth, e ){
+        setWidth( e );
+    }
+    var width = variants.getColorValue( 'MAIN-WIDTH-MAX' );
+    var mqm = window.matchMedia( 'screen and ( min-width: ' + width + ')' );
+    mqm.addEventListener( 'change', onWidthChange.bind( null, setWidth ) );
+    setWidth( mqm );
+})();