The Hero and the Button

Now the main content. On a wide screen, lines of text that run across the whole window are hard to read, so main becomes a column in the middle of the page. As in the final project of the CSS course, it gets a max-width, a maximum width: on a large screen, the column is 960 pixels wide, and on a phone, it shrinks to fit the screen. margin: 0 auto puts it in the middle, and the padding 0 32px keeps the text away from the edges of a narrow screen.

The hero should catch the eye: lots of room above and below it (padding: 64px 0), everything in the center, and a big heading. The heading's rule is .hero h1, so it styles only the heading in the hero. margin: 0 removes the heading's margins, so that the room around it is just the padding of the hero.

Then the button. A link is an inline element, and those are only as big as their text. With display: inline-block, the link stays in its line, but inside, it becomes a box, like a real button (buttons are inline-block by default, as you saw in the lesson Display and Position). Then it gets padding, rounded corners, an amber background (#f59e0b), dark bold text (#1e1b4b, the color of the header) and no underline.