Modern Site pages often have a large amount of unused white space on the sides of the active content area. The bulk of the nonsense found on Google is not helpful.

The short answer is:

  1. I used F12 (aka “Developer Tools”) to figure out the exact name of the content area that is undersized. In our case it’s “CanvasZone”. Later on it was “SPCanvas-canvas”. So I’ve updated the code for both.
  2. I added a Content Editor Web Part  (You may have to add the free “Modern Content Editor Web Part” from Github.)
  3. I added the below CSS code to the CEWP above to set the width to 100% and the margins to 0.

Here is the code for you to use:

<style text="type/css">
.CanvasZone>:first-child,.CanvasZone,.CanvasComponent,.SPCanvas-canvas,.CanvasZoneContainer {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0px !important;
    margin: 0px !important;
}
.CanvasSection-xl4>:first-child {
    margin: 0px !important;
    padding: 0px !important;
}
</style>

__________________________________________________________________

**Update Apr 24, 2025: This super helpful video from SPJeff covers this very topic. Great minds think alike. I wish I had found his video before going to all of this work! I added his .CanvasSection-xl4 code to my code above.

**Update Nov 8, 2025:I work with a gov’t client who’s running SP2016. I added these selectors to line 2: .CanvasComponent,.SPCanvas-canvas,.CanvasZoneContainer