From 5dadd10e3da164ad5842921bebb82f296c7f08ef Mon Sep 17 00:00:00 2001
From: GeekCorner <45696571+GeekCornerGH@users.noreply.github.com>
Date: Mon, 1 Jul 2024 19:27:29 +0200
Subject: [PATCH] fix: Align

---
 src/pages/index.module.css | 20 +++++++++++++++++++-
 src/pages/index.tsx        | 34 ++++++++++++++++++----------------
 2 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 9f71a5d..db1c294 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -16,8 +16,26 @@
   }
 }
 
-.buttons {
+.buttonsContainer {
   display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
   align-items: center;
+  margin: 0 auto;
   justify-content: center;
 }
+
+.buttons {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.buttons > div {
+  flex: 1 1 auto;
+  margin: 5px;
+  text-align: center;
+}
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index fd03e94..c1ade62 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -17,22 +17,24 @@ function HomepageHeader() {
           {siteConfig.title}
         </Heading>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-        <div>
-            <Link
-              className="button button--secondary button--lg"
-              href="/docs/getting-started/discord"
-            >
-              Get started
-            </Link>
-          </div>
-          <div>
-            <Link
-              className="button button--secondary button--lg"
-              href="/maps"
-            >
-              Take a look at our maps
-            </Link>
+        <div className={styles.buttonsContainer}>
+          <div className={styles.buttons}>
+            <div>
+              <Link
+                className="button button--secondary button--lg"
+                href="/docs/getting-started/discord"
+              >
+                Get started
+              </Link>
+            </div>
+            <div>
+              <Link
+                className="button button--secondary button--lg"
+                href="/maps"
+              >
+                Take a look at our maps
+              </Link>
+            </div>
           </div>
         </div>
       </div>