Workshop › My business card › Step 6 of 12

Center the card

What we are doing

The card stretches across the whole page. We limit its width and center it.

```css
max-width: 320px;
margin: 40px auto;
```

What it means

• max-width: 320px stops the card from getting wider than 320 pixels.
• margin: 40px auto is space outside the card: 40px above and below, and auto shares the left and right space equally, which centers it.

Your turn

Add the two lines inside the .card rule, under border-radius.

Skills: Styling with CSS

← Make the box look like a card A soft shadow →

All steps

1. Your name as a heading
2. A line about you
3. Put them in a box
4. Your first CSS
5. Make the box look like a card
6. Center the card
7. A soft shadow
8. Color your name
9. Add your links
10. Links in a row
11. Links that react
12. Build it yourself: a card that reacts