Page Layout: Centering Your Content and Giving It Rhythm

Your Skills cards and your nav spread out nicely now, but your page still stretches the full width of whatever window it sits in. The space above and below each section is whatever margin: 1.5rem happened to land on. This lesson pulls your content into a centered column. It gives the space around that column a repeating rhythm. The page reads as one designed whole instead of a stack of separately styled pieces.

The concept

Here is your page as it stands. Run it:

WHERE YOU LEFT OFF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.

Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Your Name</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img src="https://placehold.co/240x240" alt="A placeholder profile photo" />
      <h1>Your Name</h1>
      <nav>
        <a href="#about">About</a>
        <a href="#skills">Skills</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>
    <main>
      <section id="about" class="block">
        <h2>About</h2>
        <p>I like turning ideas into things anyone can open in a browser. The part that keeps me coming back is watching <strong>a page respond to something I typed</strong>, <em>even something this small</em>.</p>
      </section>
      <section id="skills" class="block">
        <h2>Skills</h2>
        <ul class="skill-row">
          <li class="skill-card">HTML</li>
          <li class="skill-card">CSS</li>
          <li class="skill-card">JavaScript</li>
        </ul>
      </section>
      <section id="contact" class="block">
        <h2>Contact</h2>
        <p>Find my code on <a href="https://github.com/octocat" class="btn">GitHub</a> or connect on <a href="https://www.linkedin.com/in/example" class="btn">LinkedIn</a>.</p>
        <form>
          <label for="name">Name</label>
          <input type="text" id="name" name="name" />
          <label for="email">Email</label>
          <input type="email" id="email" name="email" />
          <button>Send</button>
        </form>
      </section>
    </main>
    <footer>
      <p>Built while learning HTML.</p>
    </footer>
  </body>
</html>

RUN TO SEE YOUR PAGE

The "where you left off" demos show the placeholder version of the page. Your own page, with your real content, is safe in the exercise below.

Stretch a box wider than it needs to be, and the words inside it run the full width of that box. Capping that width is the first step toward a page that reads as designed. Run this narrower box.

A NARROWER BOX, STILL STUCK AT THE LEFT EDGE · HTML

Untitled

RUN TO SEE YOUR PAGE

The box now stops growing at 300 pixels, but it still sits pinned to the left edge of the space around it. max-width only limits size. It says nothing about position. One property fixes that. Run it.

THE SAME BOX, CENTERED · HTML

Untitled

RUN TO SEE YOUR PAGE

Same box, same 300-pixel limit, now sitting in the middle of the space around it instead of against the left edge. margin: 0 auto set the box's own left and right margins to auto, and the browser split whatever space was left over evenly between them.

Apply the same two properties to your whole page. Run it.

YOUR REAL PAGE, NARROWED INTO A CENTERED COLUMN · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.

Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Your Name</title>
    <style>
      body {
        background-color: ghostwhite;
        font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
        max-width: 480px;
        margin: 0 auto;
      }
      h1 {
        color: #2b3a67;
        font-size: 2.5rem;
      }
      h2 {
        font-weight: 500;
      }
      p {
        line-height: 1.6;
      }
      .block {
        background-color: rgb(237, 242, 244);
        padding: 1.5rem;
        margin-bottom: 1.5rem;
      }
      #skills {
        border: 2px solid teal;
      }
      .btn {
        display: inline-block;
        padding: 0.5rem 1rem;
        background-color: teal;
        color: white;
      }
      nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
      }
      .skill-row {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
      }
      .skill-card {
        background-color: white;
        padding: 0.75rem 1rem;
      }
    </style>
  </head>
  <body>
    <header>
      <img src="https://placehold.co/240x240" alt="A placeholder profile photo" />
      <h1>Your Name</h1>
      <nav>
        <a href="#about">About</a>
        <a href="#skills">Skills</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>
    <main>
      <section id="about" class="block">
        <h2>About</h2>
        <p>I like turning ideas into things anyone can open in a browser.</p>
      </section>
      <section id="skills" class="block">
        <h2>Skills</h2>
        <ul class="skill-row">
          <li class="skill-card">HTML</li>
          <li class="skill-card">CSS</li>
          <li class="skill-card">JavaScript</li>
        </ul>
      </section>
      <section id="contact" class="block">
        <h2>Contact</h2>
        <p>Find my code on <a href="https://github.com/octocat" class="btn">GitHub</a> or connect on <a href="https://www.linkedin.com/in/example" class="btn">LinkedIn</a>.</p>
      </section>
    </main>
    <footer>
      <p>Built while learning HTML.</p>
    </footer>
  </body>
</html>

RUN TO SEE YOUR PAGE

Your entire page, header, sections, and footer together, now sits inside a narrower column, centered in the browser window instead of stretching edge to edge.

A centered column is only part of what makes a page read as designed. The space between sections matters too. Run these three blocks, each spaced from its neighbor by a different amount.

THREE BLOCKS, EACH SPACED BY A DIFFERENT AMOUNT · HTML

Untitled

RUN TO SEE YOUR PAGE

Some gaps look cramped, others look accidental, even though every block holds the same kind of content. Now run the same three blocks with one spacing value repeated everywhere.

THE SAME THREE BLOCKS, SPACED BY ONE REPEATED AMOUNT · HTML

Untitled

RUN TO SEE YOUR PAGE

Same three blocks, same content. This time every gap matches. That repetition is what a vertical rhythm is: one spacing value, reused down the page. The eye reads the gaps as a pattern instead of a set of unrelated sizes.

The syntax

max-width sets the widest an element is allowed to grow.

body {
  max-width: 480px;
}

Unlike width, max-width still lets an element shrink narrower on a smaller screen. It only ever stops growth, never forces a fixed size.

Centering a block-level element with a max-width takes a second property: its own left and right margins, set to auto.

body {
  max-width: 480px;
  margin: 0 auto;
}

margin: 0 auto is shorthand for no top or bottom margin, and auto left and right margins. The browser calculates the leftover horizontal space beyond max-width and splits it evenly on both sides. auto behaves this way only for left and right margins on a normal block-level element. Top and bottom margins have no equivalent leftover space to split, so auto resolves to zero there.

Vertical rhythm is not a new property. It is one spacing value, such as margin-bottom: 2rem, reused on every major section instead of a different value picked for each.

header {
  margin-bottom: 2rem;
}
.block {
  margin-bottom: 2rem;
}
footer {
  margin-top: 2rem;
}

A minimal working example

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Page layout</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <h1>Page title</h1>
    </header>
    <main>
      <p>Centered content, with breathing room above and below.</p>
    </main>
  </body>
</html>

styles.css

body {
  max-width: 480px;
  margin: 0 auto;
}
header {
  margin-bottom: 2rem;
}
main {
  margin-bottom: 2rem;
}

One capped width, one pair of auto margins, and one repeated spacing value between the two sections.

Common mistakes

You add max-width: 480px; to body, expecting a centered column. The column shrinks, but it stays flush against the left edge of the window instead of moving to the middle. Run it:

MAX-WIDTH ALONE, NO MARGIN · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.

Untitled

RUN TO SEE YOUR PAGE

max-width only caps how wide the box is allowed to grow. It has no effect on where the box lands inside the browser window. Centering that box still needs margin: 0 auto set on purpose. Without it, the leftover horizontal space piles up entirely on the right, and the box stays exactly where it started, at the left.

You write margin: auto; on a box, expecting it to center both left-to-right and top-to-bottom. The box shifts into the horizontal middle, but stays pinned to the top of its container, with no vertical movement at all. Run it:

MARGIN: AUTO; CENTERS SIDEWAYS ONLY · HTML

Untitled

RUN TO SEE YOUR PAGE

For a normal block-level element, auto only produces a real split on left and right margins. That is the direction with leftover space to divide, once a width or max-width is set. Top and bottom margins have no matching leftover space, so auto computes to zero there. The box never moves down from the top.

Try it yourself

Your page still spans the full width of the browser window. The space between your sections comes from whatever margin each one happened to carry. Pull the page into a centered column with a consistent rhythm. Grey blocks near the top stay in view. After each Run that checks gaps further down, scroll the preview through Skills and Contact if you do not see them yet.

Run the starting code below. Confirm your grey section blocks still stretch across the full width of the preview.
In styles.css, add max-width: 480px; to your body rule. Run it. Confirm each grey section block is now narrower than the preview, but the whole stack still sits flush against the left edge, with empty space only on the right.
Add margin: 0 auto; to body. Run it. Confirm the same grey blocks now sit centered, with empty space open on both the left and right of the stack.
Give the page a consistent rhythm: change .block's margin-bottom from 1.5rem to 2rem. Then add a header rule with margin-bottom: 2rem;, and a footer rule with margin-top: 2rem;. Run it. Scroll the preview through Skills and Contact if you need to. Confirm the space above and below every major piece, header to main, between each section, and main to footer, now matches.
Break it on purpose: delete margin: 0 auto; from body, but leave max-width: 480px; in place. Run it. Confirm the narrow column reappears flush against the left edge, exactly like step 2. max-width alone looks like it should be enough to center a box, and it is not.
Fix it: add margin: 0 auto; back to body. Run it. Confirm the column returns to the center.

TRY IT YOURSELF · HTML

▸WHAT'S ALREADY IN THIS PAGE

New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.

<!DOCTYPE html> — Tells the browser to use modern rendering rules. Taught in lesson 2.
<html> … </html> — The root element that wraps the whole document. Taught in lesson 2.
lang="en" — Sets the page's language. Taught in lesson 6.
<head> — Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.
<meta charset="UTF-8" /> — Sets how the browser decodes the text. Taught in lesson 6.
<title> — Sets the browser-tab text. Taught in lesson 2.
<body> — Holds everything a visitor actually sees. Taught in lesson 2.

Untitled

RUN TO SEE YOUR PAGE

Your page now sits in a centered column with consistent space between every section, instead of stretching edge to edge with random gaps. That fixed 480-pixel column reads well on a wide monitor. On a narrow phone screen, the same fixed width can force the page to scroll sideways. The next lesson, media queries, adjusts your styles for screens of different sizes.