On my website, I have two separate sections dedicated to use cases and benefits. Here is the code:
.onboardmessaging {
min-width: 100%;
}
.onboardmessagingwrap {
min-width: 100%;
}
.usecase {
padding-left: 8vw;
max-width: 50%;
float: left;
}
.benefits {
padding-right: 8vw;
max-width: 50%;
float: right;
}
@media only screen and (max-width: 500px) {
.usecase {
padding-left: 0;
min-width: 100%;
float: left;
}
}
@media only screen and (max-width: 500px) {
.benefits {
padding-right: 0;
min-width: 100%;
float: right;
}
}<div class="onboardmessagingwrap">
<div class="onboardmessaging">
<div class="usecase">
<p class="title">Title</p>
<p class="sentence">1</p>
<p class="sentence">2</p>
<p class="sentence">3</p>
<p class="sentence">4</p>
</div>
<div class="benefits">
<p class="title">Title</p>
<p class="sentence">1</p>
<p class="sentence">2</p>
<p class="sentence">3</p>
<p class="sentence">4</p>
</div>
</div>
</div>
<br>
<p>Why does this sit underneath and not below the lists?</p>While these sections align perfectly next to each other, any additional content on the page appears below them instead of alongside. Despite closing all DIVs properly and adding an extra one, the issue persists.
The question
Why does this sit underneath and not below the lists?If anyone can provide assistance, it would be greatly appreciated. Thank you in advance.