Elements with horizontal padding inside sections don't line up correctly

[Xilonz]

Describe the bug Columns inside sections don't line up correctly.

Have you tried all the steps at https://oxygenbuilder.com/documentation/troubleshooting/troubleshooting-guide/? Yes

Are you able to replicate the issue on a Sandbox install at https://oxygenbuilder.com/try? See screenshots

To Reproduce Steps to reproduce the behavior:

1. Create a section
2. Insert columns
3. See elements not lining up (screenshot under "what actually happens")

Expected behavior A clear and concise description of what you expected to happen. I'd expect the columns row to have a negative 20 horizontal margin

What actually happens No negative margin is applied, resulting in a double padding.

Desktop (please complete the following information): All

Smartphone (please complete the following information): All

Additional context Add any other context about the problem here. This is also true for .oxy-posts and other elements that have horizontal padding inside a section.

[KittenCodes]

@Xilonz I'm sorry, but I'm not sure I understand. Where are you expecting negative padding to be applied?

[Xilonz]

When I add a columns component inside the section component there's a 20px padding in the section component and an additional 20 px padding in the column itself. This results in a 40 px horizontal padding (2nd image, purple = section outline, white = row outline, orange = column outline)

Popular frameworks like bootstrap solves this issue by applying a -20px horizontal margin on the row (1st image).

[Xilonz]

This is used in the woocommerce extension:

.woocommerce ul.products {
    display: flex;
    flex-wrap: wrap;
    margin: -10px -20px 20px;
}

Hover this doesn't check if its inside a section, so it'll not look right when the woocommerce product list is not inside a section (e.g. full width sites)

This is my current default css snipped I use for all oxygen sites to fix the weird behavior/misalignment of columns. I hope someone finds it useful.

.ct-section>.ct-section-inner-wrap {
  align-items: initial;
}

.ct-new-columns,
.oxy-easy-posts {
  width: initial;
}

.ct-section .ct-section-inner-wrap > .ct-new-columns,
.ct-section .ct-section-inner-wrap > .oxy-easy-posts {
  margin-left: -20px;
  margin-right: -20px;
}