Workshop › My business card › Step 10 of 12

Links in a row

What we are doing

The list shows bullets and one link per line. We remove the bullets and put the links side by side with flexbox.

```css
ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 16px;
}
```

What it means

• list-style: none removes the bullets; padding: 0 removes the indent lists get.
• display: flex lays the items out in a row.
• gap: 16px leaves 16 pixels between them.

Your turn

Write the ul rule under the h1 rule.

Skills: Styling with CSS

← Add your links Links that react →

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