I'm designing a landing page containing multiple sections each having the same padding from left and right but different background colors. Can I apply this padding to the entire landing page? The issue I'm supposed to face is that the padded area will have the background color of that page not of that section( as it varies for each section). Any feasible solution to this problem would be appreciated. I've attached a screenshot of that page as well.

CodePudding user response：

If you want same padding for each section, you can use a common class in each section.

.common-class{
   padding: as you want;
}

CodePudding user response：

Since you did not provide your code, I assume your sections are direct children of the body. Then you can set this in your css file:

body > section {
   padding: 1rem;
}

All sections which are direct children of the body will have the padding of 1rem applied.