Understanding the CSS Box Model - Beginning CSS3 - page 104

5. Create a style to indent the paragraphs by 30 pixels like this:
p {
margin-left: 30px;
}

6. Save the style sheet, and view destinations.html in a browser. The content should be

centered with the paragraphs slightly indented from the headings.

7. Resize the browser window so that it's less than 650 pixels wide. The headings and

right side of the paragraphs are uncomfortably close to the edge of the page, as
shown in Figure 6-8 .

Figure 6-8. When the browser viewport is narrow, the text is too close to the sides

8. Center the main heading using the text-align property, and set its value to center :
h1 {
text-align: center;
}

9. Move the other headings away from the edge of the screen by adding a small
horizontal margin. You need to add the margin on both sides in case you have a long
heading that stretches across the full width of a narrow screen. Use a group selector
for <h2> and <h3> elements like this:
h2, h3 {
margin-left: 10px;
margin-right: 10px;
}