adjust space

components/BottomNav.module.css

@@ -2,15 +2,19 @@
   display: flex;
   flex-flow: center;
   align-items: center;
-  justify-content: space-around;
-  /* or inline-flex */
+  justify-content: space-between;
+  margin: calc(40rem / 16) calc(40rem / 16);
+}
+
+.subBox {
+  display: inline-block;
 }
 
 .item {
-  display: inline-block;
   color: var(--primary-text);
   font-size: calc(28rem / 16);
   position: relative;
+  margin: calc(24rem / 16);
 }
 
 .item:after {

components/BottomNav.tsx

@@ -11,14 +11,26 @@ interface PageLinks {
 export function BottomNav(props: PageLinks) {
   return (
     <div className={styles.container}>
-      <Arrow isPointRight={true}></Arrow>
-      <Link href={props.leftPage}>
-        <a className={styles.item}>View Demographics</a>
-      </Link>
-      <Link href={props.leftPage}>
-        <a className={styles.item}>View Co-ops</a>
-      </Link>
-      <Arrow isPointRight={false}></Arrow>
+      <div className={styles.subBox}>
+        <Link href={props.leftPage}>
+          <a>
+            <Arrow isPointRight={true}></Arrow>
+          </a>
+        </Link>
+        <Link href={props.leftPage}>
+          <a className={styles.item}>View Demographics</a>
+        </Link>
+      </div>
+      <div className={styles.subBox}>
+        <Link href={props.leftPage}>
+          <a className={styles.item}>View Co-ops</a>
+        </Link>
+        <Link href={props.leftPage}>
+          <a>
+            <Arrow isPointRight={false}></Arrow>
+          </a>
+        </Link>
+      </div>
     </div>
   );
 }
@@ -30,8 +42,8 @@ interface ArrowProps {
 function Arrow({ isPointRight }: ArrowProps) {
   return (
     <svg
-      width="300px"
-      height="150px"
+      width="250px"
+      height="20px"
       className={isPointRight ? styles.right : styles.left}
     >
       <defs>
@@ -49,10 +61,10 @@ function Arrow({ isPointRight }: ArrowProps) {
       </defs>
 
       <line
-        x1="295"
-        y1="75"
-        x2="95"
-        y2="75"
+        x1="250"
+        y1="10"
+        x2="100"
+        y2="10" // half of svg height
         strokeWidth="3"
         markerEnd="url(#arrow)"
         className={styles.linePath}

pages/playground.tsx

@@ -169,7 +169,9 @@ export default function Home() {
         />
       </div>
 
-      <h2></h2>
+      <h2>
+        <code>{"<BottomNav />"}</code>
+      </h2>
       <BottomNav leftPage="/" rightPage="/"></BottomNav>
     </div>
   );