Fix responsiveness

src/pages/index.astro

@@ -13,11 +13,9 @@ import metaFrontEnd from "../images/certificates/metaFrontEnd.png"
 ---
 
 <Layout>
-    <header>
+    <header id="home">
-        <section id="home">
+        <Image src={logoLong} alt="Henry Hiles" />
-            <Image src={logoLong} alt="Henry Hiles" />
+        <span>Full Stack Web Developer and Discord Bot Developer</span>
-            <span>Full Stack Web Developer and Discord Bot Developer</span>
-        </section>
     </header>
     <mdui-card variant="outlined">
         <section id="about">

src/styles/global.css

@@ -1,3 +1,7 @@
+* {
+    box-sizing: border-box;
+}
+
 :root {
     --primary: 78, 148, 228;
     background-image: url(background.svg);
@@ -41,6 +45,8 @@ main {
     display: flex;
     align-items: center;
     gap: 2em;
+
+    padding: 1em;
 }
 
 mdui-divider {

src/styles/index.css

@@ -1,3 +1,22 @@
+header {
+    display: flex;
+    flex-direction: column;
+    font-size: 2em;
+    justify-content: center;
+    align-items: center;
+
+    & img {
+        max-width: 35rem;
+        height: min-content;
+    }
+
+    & span {
+        display: flex;
+        text-align: center;
+        padding: 0 0.5rem;
+    }
+}
+
 section {
     max-width: 1000px;
     display: flex;
@@ -6,7 +25,7 @@ section {
     & div {
         display: flex;
         justify-content: center;
-        gap: 1.5em;
+        gap: 1em;
         flex-wrap: wrap;
     }
 
@@ -21,28 +40,10 @@ section {
         font-size: 1.3em;
     }
 
-    &#home {
-        font-size: 2em;
-        justify-content: center;
-        align-items: center;
-        padding-bottom: 1em;
-
-        & img {
-            max-width: 35rem;
-            height: min-content;
-        }
-
-        & span {
-            display: flex;
-            text-align: center;
-            padding: 0 0.5rem;
-        }
-    }
-
     &#about {
         & #stats img {
             width: 45%;
-            min-width: 400px;
+            min-width: 300px;
         }
 
         & #certificates {