How to resize the content

Hello,

I would like to set the display content width with like 800 px on over 1040px display.
I tried to the code

.site-content {
    width: 800px;
    margin-left: auto;
    margin-right: auto;

But when the display gets smaller like tablet or mobile phone-size, it still keeps the width. I also tried to use the “@media (min-width: 1000px;)” with
the code above. But it didn’t work. I didn’t build this page with page builder.
I tried to make this blog page with elementer as well. Both way , it didn’t work.
Any suggestions appreciated.
Thanks.

The page I need help with: [log in to see the link]