Layout with Flexbox

Ada don get three menu cards, but dem dey stand for top-top each other. She wan arrange dem for one line side by side. Flexbox go do am.

display: flex

When you add display: flex to a container, e children go arrange themselves for one line (by default). Dis one na di easiest way to make a row of items.

.menu-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

• justify-content — how di items dey sit along di main line (center, space-between...)
• align-items — how dem dey line up across di line
• gap — di space between each item

Now Ada's three cards go stand for one line, centered and evenly spaced. Her menu don look professional!