Gaps Between Items

Let's go back to the breed cards. They stand in a row, but they touch each other. We could separate them with margins, as we did with the links in the navigation bar (each of them has margin-left: 1rem). But a margin adds space on one side of every item, so we'd also get space in front of the first item or after the last one, where we usually don't want any.

A flex container has a better tool for this: the gap property. It sets the size of the gaps between the items, and only between them, never at the edges of the container:

.container {
	display: flex;
	gap: 2rem;
}

Just like with margins, you can use any unit you know, for example px or rem.