Changing product page width without affecting any other width settings

[Pah34H]

How can I change the product page width without changing any other width settings? I changed the page width to 1600 px which I want to keep but it will make my product page to wide (first image).
I used the code below but it will make some strange changes to the entire side (image two).

{% if template == "product" %}

<style>

@media screen and (min-width: 768px) {

.page-width { max-width: 1000px !important; } }

</style>

{% endif %}

This is how it looks without the code changes (to wide)

This is how it looks after the code changes (header and everything else is changed)

[AnneLuo]

Hi, @Pah34H 

You should not modify the style of page width separately, but need to modify the style of the intermediate product container. Just like below

{% if template == "product" %}
 <style>
  @media screen and (min-width: 768px) {
    .page-width.xxx { max-width: 1000px !important; } 
  }
 </style>

{% endif %}

[Pah34H]

The above code is unfortunately not working for me

[Pah34H · Accepted solution]

Ok I found a solution:

Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-main-product.css->paste below code at the bottom of the file:

@media (min-width: 768px) { [id^="MainProduct-template"] { --page-width: 1600px !important; } }