How to adjust the page width with CSS?

I am adjusting this blog to scale width dynamically. 

I am focusing on the desktop size as the mobile has a separate CSS code which works well.

What are the most popular Desktop display resolutions?

In 2022, the global statistics for the Desktop and Tablet display width are the following:

width x height	global usage %
1920×1080	21.5%
1366x768	16.7%
1536x864	10.6%
1280×720	5.8%
1440x900	5.4%
768x1024 (flipped to portrait)	3.8%

Based on the statistics, I decided to make to CUT OFF the width at about 1024 pixels wide. This matched my empirical experience of making the narrowest possible window with the tinies of fonts before the page is unusable.

Before you copy and paste my code into your page, please remember that,
like anything in life, it will require try-and-error practice.

// START HORIZONTAL / WIDTH SIZING SECTION 

body {

  width: 95%;   

//max-width: max-content;

margin: auto;

}

.columns-inner {         // container that hold both main and right columns 

width: 100%;

min-width: 670px;   // number above which the content starts sliding beyond RIGHT margin of the browser

}

.column-center-outer {

width: 75%;

}

.column-right-outer {  

width: 25%;

min-width: 14.1em;  // empirically derived, moves the RIGHT colunm to the BOTTOM if it shrinks to less than that

}

// END HORIZONTAL / WIDTH SIZING SECTION 

What were the results of the width adjustments?

The full 2K display looks like this

The minimal "full-width" page looks like this

and, the minimal page width looks like this

Summary

Overall, I am very happy with the result. It took way too long, but it was fun to get back into HTML and CSS Web development, it is something, I used to be very good at but did not practice for a while.

Resources:

• Statistics are taken from https://gs.statcounter.com/