Container

<div>Centers content at a readable max-width inside a section.

This page covers the Container block — what it does, how it relates to Section, and when to use it.

What it does

Container limits your content to a readable width and centers it horizontally. Without it, content inside a full-width Section would stretch edge to edge.

A Section automatically includes one Container, but you can add more if you need separate constrained areas within the same section.

When to use

• Content width control — keep text and elements at a readable width
• Centered layouts — horizontally center content within sections
• Consistent spacing — apply uniform horizontal padding

Container vs Section

Block	Role
Section	Full-width semantic wrapper with its own background
Container	Width-constrained content wrapper inside a section

They work together: Section provides the full-width background, Container limits the content width inside.

Common mistake

Don't use a Container at the root of your page without a Section around it. Container constrains width, but without a Section it has no full-width parent to contrast against — your layout will look the same as without it.

HTML output

Container renders a <div> with a data-unbk-container attribute:

<div data-unbk-container>
  <!-- Your content -->
</div>

Attribute	Value	Purpose
data-unbk-container	—	Identifies container elements

Preset styles

The data-unbk-container attribute applies the following default CSS:

[data-unbk-container] {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 1340px);
  margin-left: auto;
  margin-right: auto;
}

You can override these defaults with your own selectors.

Next steps

• Section — full-width wrapper that includes a container
• Div — generic grouping without container behavior