The images shown are taken from the previews of the template settings.
Here
you can see what happens in the tablet and smartphone display if, in the "Layout" section of the template settings, Row options -> Style -> Margin is set to 0px. As you can see, there are no margins between the content (in this case an article) and the edge of the device screen (tablet or smartphone).
Here
I show the setting I thought of to make the right and left margins of the contents of 5px. and here
you see the result, with the text of the article "detached" by 5px from the edges of the device screen.
You see, however, that everything else is also "detached" from the margins, for example also the "breadcrumb" module. Furthermore, the margins of the main body are 5px even in desktop view, which is not necessary.
If possible, I would like you to tell me which code to insert in the custom.css file of the template to make sure that the right and left margins of 5px are set only for the contents and not for the whole main body, and only for tablets and smartphones.
Thank you