Put the main box in the middle

01 / 05

The body of a page needs a width

When writing runs from one edge of the screen to the other, your eyes travel too far across and it gets hard to read.

So the body goes inside a box with a width on it. The same reason newspapers and books are set in columns.

.main {  width: 600px;}

02 / 05

Set a width and the box still clings to the left.

A div is treated as "this whole line is mine", so even with space going spare on the right it will not budge.

03 / 05

Add display: inline-block; and the box joins the same crowd as text. It keeps its width and height; only the way it lines up changes.

Once it counts as text, the parent's text-align: center; can put it in the middle.

.wrapper {  text-align: center;}.main {  display: inline-block;  width: 600px;}

04 / 05

The catch is that text-align: center; passes down to the writing inside, so your body text ends up centred too.

Write text-align: left; on the box to put it back. Middle on the outside, left on the inside is the phrase to remember.

.main {  display: inline-block;  text-align: left;  width: 600px;}

05 / 05

Once the box is there, you can put headings, paragraphs or lists inside it, whatever you like.

Build a page from the outside in. Settle the big boxes first. Have a go.

<div class="wrapper">  <div class="main">    <h2>Welcome</h2>  </div></div>