I have added Columns layout to HERO section. It comes with -10px margin on the left and right side.
Here is my site Read-Only: https://preview.webflow.com/preview/sample-landing-63fa42?utm_medium=preview_link&utm_source=designer&utm_content=sample-landing-63fa42&preview=a0d07faddb6f56539e5eb08fbd6af1c5&mode=preview
If you add the style it will definitely override the default margin.
It should override the default margin, but it’s not happening. I have shared the preview link where you can check it. The Columns element is assigned -15px margin on both the sides. Try to change that margin and check it with X-ray mode turned ON; it only changes on the property panel, but it doesn’t reflect on the Designer, the margin stays -10px visibly.
Well you had a margin on your container too. It essentially is creating the exact same effect because the columns actually extends outside the container. Is there something that it’s specifically doing visually that you don’t want?
Because every column has a 10px padding, -10 margin on its parent will make sure the whole block doesn’t fall out visually of the overall site structure, negating this padding while allowing automatic spacing between the columns.
It does reflect the changes.
I got that. I am confused how to handle this with my 1140px container. It has 12 columns with 30px gutter.
Changing -10px margin to -15px doesn’t reflect.
When I check preview, it applies .w-container .w-row class which is the default. It doesn’t apply the class that I have created to apply -15px margin on left and right sides. As a result, my 1140px container becomes 1130px. Screenshot attached.
Your read-only link doesn’t work so be sure to reshare it.
30px gutter means 15px paddings for every column and -15px margins for the columns container
Please update your read-only so that I can have a look.
@dram Oh, yes. I have enabled the read-only mode.
Attaching a screenshot which may help you understand what I mean.
Some sort of glitch, dunno. Just manually adjust the value of margins again for this combo class (so that the -15px is shown in blue rather than orange, just drag the handle so that it changes and make it back -15px, it’ll be blue and working as intended)
@dram I ended up changing the gutter width to 20px and margin width to 10px. 
So change it to the proper values then?
Yes. I had no option left as the -15px margin was not reflecting. I will try to figure it out later. 
Thanks for your help.
Please reshare your read-only and I will make a short video showing what I meant.
Try this and see if it works for you.
@dram, it worked! Can’t believe… 
Thanks a ton, man.
You are welcome. Happy designing
Hello @dram,
Can you explain how you fixed the issue? Your link above showing the fix no longer works. I’m having the same issue where I create a new class, apply it to Columns, but it doesn’t override the default -10px margin. I’m attempting to change the default to -15px as well.
Did you try following this?
I’ve created a custom class and applied it to the Columns component. My overrides are blue, but the output in preview mode shows the Webflow class having priority:
.w-container .w-row {
margin-left: -10px;
margin-right: -10px;
}
Instead of my class:
.columns {
display: flex;
margin-right: -15px; (override by class above)
margin-left: -15px; (override by class above)
flex-wrap: wrap;
}
