I like to wrap the content in <div class="center"> in cases like this! The background of the section reaches the edges of the page, but the content has some max width.
.center {
box-sizing: content-box;
max-inline-size: 69.375rem;
margin-inline: auto;
padding-inline: 2rem;
}
0
@markuslewin I don't fully understand. box-sizing: content-box still places the box inside the parent container. If the parent container has a padding, the box will not reach the edge of the screen 🤨
0
@Dudeldups The box-sizing: content-box makes it so that the padding-inline isn't included in the max-inline-size calculation. I'd wrap the text content, but put it inside the section that has a background.
<section class="middle">
<div class="center">
<img class="middle__hero-img" />
<ol class="middle__list"></ol>
</div>
</section>
Marked as helpful
0
