MP Web Studio
CSS100 of 100 available
95 / 100

LESSON 95 OF 100

Centre content with logical properties

Create a container that adapts to writing direction.

Official sourceW3C CSS Logical Properties — inline-axis spacingReviewed: 2026-08-26
STEP 1 · LEARN

How it works

Logical properties use inline and block axes rather than fixed physical sides. margin-inline and padding-inline automatically adapt to text direction.

Correct example
.content { max-width: 720px; margin-inline: auto; padding-inline: 24px; }

The container has a limited width, is centred and keeps space on both inline edges.

Common mistake
.content { margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }

Physical properties can work here but duplicate declarations and do not practise the logical axis.

STEP 2 · APPLY

Your exercise

Set .content to 720px max-width, auto margin-inline and 24px padding-inline.

STEP 3 · BUILD

Write and see the result

index.htmlCSS
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK

What needs to pass

0%not checked
  • The container has a 720px max-width.
  • Inline margins are automatic.
  • Inline padding is 24px.
  • The target element is present in the page.
Explain the solution logic

max-width limits the line, while the two logical properties control inline-axis spacing.