Row Section Margin Not fixing

[Jabran]

Jabran

April 26, 2022 at 2:29 am

Hi, I have created a row layout, and within it, I have a section in which I have written an advance heading to make it appear like a ribbon. But the problem as the section (like a heading) looks perfectly aligned in the WordPress Gutenberg but when I view it, it changes its position.

Check-in Gutenberg screenshot: *Login to see link (as you can see the “Top Pick” is aligned to the corner)

When viewing post: *Login to see link (as you can see the “Top Pick” has changed it’s margin).

I have checked for the css through Inspect element and I found this

`.kadence-column_e8165d-04 > .kt-inside-inner-col > *, .kadence-column_e8165d-04 > .kt-inside-inner-col > figure.wp-block-image, .kadence-column_e8165d-04 > .kt-inside-inner-col > figure.wp-block-kadence-image {
margin-left: 10px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
———————————–

In the above css I have changed the “margin-left: 10px;” into “margin-left: -20px;” and it worked as you can see here (screenshot: *Login to see link

But the problem is that code applies to that specific column. I have created a reusable block and I want to use the same block again and again, so when I want to adjust that margin, I have to put the code again and again because the column number is changed and every block has its own column or css, so can you please help with this or provide me a universal css that I can use to make the margin correct?

Thank you
Jabran