How to increase website margins on mobile

Hi! I've made some modifications to my website on desktop and now on mobile, I don't like the margins (left and right). They are too small. See the screen shot. How can I increase them with CSS code? Only on mobile please. I'm on 7.0. My website: sophie-a.com. Thank you!

Add to Design > Custom CSS

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

Thank you so much!!! It works very well 😄

Hi again!! 😉 Just realized that the margins have been modified only on the homepage. How can I change the margins on all pages? 

On 3/19/2023 at 6:07 PM, sophie-a said:

Hi again!! 😉 Just realized that the margins have been modified only on the homepage. How can I change the margins on all pages? 

remove this

body.homepage

I tried it but it didn't work 😞 

The code:

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

Try this new code

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