Navbar + hero

space-between, gap, and centering in real UI

Northline

Trails Gear Guides Join

Weekend kits ready

Flex centers the copy and the button row

What Flexbox is doing

.app-nav — justify-content: space-between puts the brand left and links right
.links — display: flex + gap spaces the pills evenly
.overlay — flex-direction: column + both axes centered for the hero stack
.actions — a nested row with gap: 12px between buttons

Hero photo via Unsplash (photo-1506905925346). Overlay keeps text contrast (rule 30).

Important HTML

Brand and links sit as flex children in the nav row.

<div class="app-nav">
  <div class="brand">…</div>
  <div class="links"><a>…</a></div>
</div>

Important CSS

Space-between spreads brand and links.

.app-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}