A container is an HTML element that holds related content so its layout can be styled as a unit. A card, for example, can use an outer <section> for its image and an inner <div> for readable text. Work from the outside in: style the card, then the content area, then its heading, paragraph, and link. section 5.4 section 5.4.1
Give each container a clear job:
- Frame the card: apply the image to the outer section, use background-size: cover to fill it, and provide a fallback background color. section 5.4.1
- Protect the text: give the inner div a translucent background, padding between text and its edge, and margin between it and the image edge. section 5.4.2
- Arrange related sections: wrap the checkout cart and summary in one div; on wide screens, make that wrapper a flex container with a gap. section 8.1 section 8.5
Keep an extra-wide page readable
If a checkout layout keeps expanding with the window, its summary becomes harder to scan. At widths of 955px and above, `.section-container` can place the cart and summary side by side. Separately, `main { max-width: 1280px; margin: 0 auto; }` limits the whole layout’s width and centers it when more space is available. The flex wrapper arranges its children; `main` constrains the page. section 8.5
Listing 8.29 Placing the two cards side by side on wide screens
@media (min-width: 955px) {
.section-container {
display: flex;
gap: 20px;
}
section.my-cart { flex-grow: 1; }
section.summary { flex-basis: 250px }
}
See the media query that turns the checkout wrapper into a flex container and adjusts the two sections’ widths. section 8.5
The page’s container need not always be `main`. A newspaper layout uses `body` with a maximum width and automatic side margins. When that leaves space on either side, setting the background on `html` avoids white bands. section 4.5.3
