Add margin to a section on mobile only? (Brooklyn Theme)

[wickedbride]

Good evening! I'm redesigning my home page block by block, and I'm stuck on one section. It's a Custom HTML section (#shopify-section-1627510153775df366), and it displays fine on desktop, but on mobile the border extends to the edges of the screen. I'd like to give it some padding on the left & right on mobile only, but I've tried several different methods and none of them work. Here's the last thing I attempted: 

@media only screen and (max-width: 600px) {
.shopify-section-1627510153775df366 {
margin-right:10px;
margin-left:10px;
}
}

But I'm missing something. Can anyone help? Thanks! 

.

[dmwwebartisan]

@wickedbride 

Please share your store URL.

[wickedbride]

www.wickedbride.com - thanks! 

[Kinjaldavra · Accepted solution]

hello @wickedbride 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 729px) {
#shopify-section-1627510153775df366{
	margin :0 12px !important;
}
}

[wickedbride]

@Kinjaldavra - that worked perfectly, thanks so much! 

[KetanKumar]

@wickedbride 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.