diff --git a/components/site-bottom-nav.tsx b/components/site-bottom-nav.tsx
index 7ad76d87..4060d8cd 100644
--- a/components/site-bottom-nav.tsx
+++ b/components/site-bottom-nav.tsx
@@ -82,11 +82,18 @@ export function SiteBottomNav() {
         "pb-[env(safe-area-inset-bottom)]",
       )}
     >
-      <ul className="flex items-stretch py-2">
+      <ul className="flex items-stretch justify-around py-2">
         {items.map((item) => {
           const active = isActive(item);
           return (
-            <li key={item.label} className="flex-1">
+            <li
+              key={item.label}
+              // flex + items-center + justify-center so the fixed-size
+              // pill below sits centred inside its equal-width cell;
+              // without these the pill collapses to the left edge of
+              // each `flex-1` slot.
+              className="flex-1 flex items-center justify-center"
+            >
               <Link
                 href={item.href}
                 aria-label={item.label}