Get the place for a list ready

The way to build the place is a shape you already know: a band and a container, in two stages.

• the outer box … a band from the left edge of the screen to the right. It carries the background colour
• the inner box … the container that holds what you line up. Set its width and put it in the middle

No new setting turns up in this lesson. The practice here is combining what you know into a base.

The outer band gets a background colour and space above and below. Leave the space at the sides at 0 — the inner box decides the position across.

The two-value form from the last lesson comes in useful as it is.

The inner container gets a width and margin: 0 auto;. Without a width auto does nothing, so those two lines always come together.

The knack here is not to write a different .container rule for each band. Reuse the same container in every band and what is inside lines up across the page exactly.

A heading is part of the contents too, so put it inside the container. Put it straight into the outer band and it sticks to the left edge.

When you only want to tidy the heading inside the container, aim at it by joining with a space, as in .container h2. Build this much before you line up any cards.