How to modify the mobile margins?

Hi! I need to modify the margins of the screen (left and right) on all pages on mobile only. I got help from @tuanphan. He provided me this code but it only modify the margins on the homepage. I need all pages.

@media screen and (max-width:640px) {
body.homepage .Index-page-content {
    margin-left: 50px !important;
    margin-right: 50px !important;
}
}

Thank you!!

You'll want to remove this text from the code:

.homepage

It doesn't work. I've tried it.

This code works for the homepage but not for all other pages.

@media screen and (max-width:640px) {
body .Index-page-content {
    margin-left: 12px !important;
    margin-right: 12px !important;
}
}

Can you share your website URL?

Where are you placing the code?

My website url: https://sophie-a.com

I place the code in the Design section / Custom CSS. See the screen shots (my Squarespace is in French).

Try this code instead:

@media only screen and (max-width:640px) {
  .Index-page-content {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
}

I did also notice that you have an error in the CSS, lines 1 and 2 has a break after the comma, those selectors should be on the same line: