I'm having trouble getting the desired 150px padding to appear on the top and bottom of a section in my project. Here's an example:
Below is the code for the section:
.wp-block-mkl-section-block .section-bg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-repeat: no-repeat;
max-width: none;
z-index: 0;
}
section.section-hero .wp-block-columns.has-2-columns {
max-width: 1080px;
margin: 0 auto;
}
.wp-block-columns {
flex-wrap: nowrap;
}
.wp-block-columns {
display: flex;
flex-wrap: wrap;
}
*, ::before, ::after {
box-sizing: inherit;
}
.wp-block-column.col-two-third {
flex-basis: calc(60% - 16px);
}
.wp-block-column {
margin-bottom: 0 !important;
}
.wp-block-column {
flex-basis: calc(50% - 16px);
flex-grow: 0;
}
.wp-block-column {
flex-grow: 1;
margin-bottom: 1em;
flex-basis: 100%;
min-width: 0;
word-break: break-word;
overflow-wrap: break-word;
}
.wp-block-column.col-one-third {
background: rgb(255,255,255,.9);
flex-basis: calc(40% - 16px);
padding: 16px 24px;
}<section class="wp-block-mkl-section-block section-hero" style="padding-bottom:150px;padding-top:150px">
<div class="section-bg bg__stretched" style="background: url(http://new.cajunland.com/wp-content/uploads/2019/10/recipe-double-seasoned-cajun-burger.jpg) no-repeat fixed center/100%">
<div class="wp-block-columns has-2-columns">
<div class="wp-block-column col-two-third">
<p> </p>
</div>
<div class="wp-block-column col-one-third">
<h1>Double Seasoned Cajun Hamburgers</h1>
<p style="color:#000;"><strong>Yield:</strong> 4<br><strong>Prep Time:</strong> 15 minutes<br><strong>Cook Time:</strong> 10-15 minutes</p>
</div>
</div>
</div>
</section>