Discovered this little trick while setting up a new project and figured it was worth passing along. Some may already be doing this.
My usual workflow for side padding was 3.5 at mobile, bump to 5 at tablet, then zero it out on desktop once the container has its own gutters. Three edits per container, on every page. Adds up fast.
Here’s how I got it down to one.
In Screens in Theme Studio, I switched my containers from Auto to Pixels. Then set my padding once at Mobile and let it inherit straight up through every breakpoint.
The offset is the part that makes it work. Padding gets subtracted from the container width, so 3.5 (14px) on each side eats 28px of your content. Add that 28px back onto the container and the content lands right back on the width you actually wanted. The padding is still technically there at every breakpoint, it just stops costing you anything.
Using 3.5, looks like:
- SM 640 → container 628 (content 600)
- MD 768 → container 748 (content 720)
- LG 1024 → container 988 (content 960)
- XL 1280 → container 1168 (content 1140)
- 2XL 1536 → container 1348 (content 1320)
Set padding to 3.5 at Mobile and never touch it again. On phones it’s doing real work. Everywhere else it’s absorbed into the container math. Setup up once and forget about it. 
