How to style margins based on screen size?

[cma6]

My website was originally designed for a 20" (4:3 aspect ratio) desktop monitor. However in 2016, I believe–correct me if I’m wrong–that a much wider screen is typical, e.g., 21" (16:9 aspect ratio) is more common. As a result, several “template” pages on the site need to have the style sheet adjusted.
For example, look at the category page on a wide monitor:
https://www.vintagetextile.com/1920s_to_1930s.htm

How can I update the style sheet so that styles are unchanged for a 20" (4:3) monitor. However, on a wide-screen monitor, although columns 1 & 2 would remain fixed; column 3 would be made narrower by increasing the right and left horizontal margins of the page?
Thanks in advance to the CSS experts at Digitalpoint, who have helped me in the past.

Here is the current style sheet:

body{background-color:#fff; font:medium Verdana,Tahoma,Helvetica,sans-serif;}
*, *:before, *:after { -webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;}
.outer {width:90%;
margin:0 auto;}
h1 {color:#fff;
background-color:#535353;
font:1.55em "Bookman Old Style";
padding:0.2em 22px 0.35em;
margin-bottom:0.5em;}
h2 {color:#000;
background-color:#fff;
font:bold 1.125em Verdana,Tahoma,Helvetica,sans-serif;
padding:0 16px;}
.logo { text-align:center;
margin-bottom:20px; }
.logo img { max-width:100%;
height:auto; 
border:0 none;}
.item {overflow:hidden;}
.item > div {
display:table-cell;
vertical-align:middle;
padding:0;} 
.item .imagebox { padding-right:20px;}
.item:nth-child(odd) .descript { padding-left:209px;}
.item img
{display:inline-block;
width:209px;
height:325px;
vertical-align:top;
text-align:center;
border:0 none;} 
.item:nth-child(even) {margin-left:209px;}
.item:nth-child(odd) {background-color:#e5e5e5;}
.item p {font-size:1em;
line-height:1.375;
margin:.5em 20px .75em 0; }
.pid {margin-top:.75em;}
.pid b { display:inline-block;
vertical-align:top;
font-weight:bold;
margin:.25em 24px; }
.pid b:first-child {
margin-left:0; }
.pid .remark {color:#f00;}
@media only screen and (max-width:900px)
{ .item:nth-child(even) {margin-left:0px;}
.item:nth-child(odd) .descript {padding-left:0;}
.item + .item {margin-top:6px;}
.item p {font-size:.9375em;}}
@media only screen and (max-width:700px)
{.item .imagebox {float:left;}
.item .descript {display:block;}
.item p {font-size:.9375em; margin-left:20px;}
h1 {text-align:center;}}
@media only screen and (max-width:520px)
{.outer {width:auto;}
.item .imagebox {
display:block;
float:none;
text-align:center;
padding-right:0; }
.pid { text-align:center;
margin-left:-12px;
margin-right:-12px; }
.item p {margin:.25em 12px .75em;}
.pid b:first-child {margin-left:24px;}}

[Mittineague]

You are correct that in 2016 things are different.

But the number of possible resolutions (not to mention what someone might have their browser sized at, not to mention zoom level), are so many it can effectively be considered limitless. eg. Ubuntu

Those more adept at Design may disagree, but for me I reserve specifying pixels for images and at times borders only.

So my suggestion would be to swap out the CSS rules for margin and padding from pixels to a unit that can be computed.

[cma6]

Mitt:
Thanks most kindly for your valuable perspective on this design issue.
At this point, I do not wish to make such a fundamental change in the page styles as to change pixels to ems as the styles are actually working very well for all screen formats from desktop to phone.
My intention is very limited: to accommodate higher aspect ratios. As you can see from the style sheet, I already use “@media” and “max-width” to target tablets and phones. I was hoping, but did not know, that there might be a CSS style that would allow detection and styling by aspect ratio, so that if it were greater than 1.6, only then would a new rule (affecting margins) go into effect.

[m3g4p0p]

I’d not bother with the aspect ratio IYAM; usually you’ll only be concerned with the screen width so as to prevent horizontal scrolling.

The content may be getting a bit “stretchy” on your site at higher resolutions, but this has nothing to do with the ratio really. A possible quick win would be to give your .outer div a max-width of, say, 1000px so that everything looks proportional no matter of the screen width.

Edit: Haha, just asked the web and apparently it is possible to query the aspect ratio… never ever even thought about that! :-D So to answer your actual question, maybe something like

@media screen and (min-aspect-ratio: 16/9) {
    .descript {
        padding-left: 300px;
        padding-right: 100px;
    }
}

(might require a higher specifity though)

[cma6]

Mg3:
That is very interesting. I will give your style a try next week and see how it looks.

[cma6]

The media query does nothing but your first suggestion works well.
Thanks.