diff --git a/public/index.html b/public/index.html
index af293ed..23bebdb 100755
--- a/public/index.html
+++ b/public/index.html
@@ -27,17 +27,29 @@ <h1>Culture Bobbin</h1>
           <a href="mailto:info@xizhang.page">Contact</a>
         </li>
       </ul>
+    </nav>
+    <main>
+      <article>
+        <h3>About me</h3>
+        <p>
+          My name is
+            <span class="bold">Xi</span>.
+          I currently work as an engineer in Web3! Once upon a time, I studied cultural anthropology. I really like people.
+        </p>
+        <h3>About this site</h3>
+        <p>
+          This page was made lovingly by hand without any JavaScript.
+
+          HTML should be written the way Bordier makes Yuzu butter.
+        </p>
+        <h3>Social Media</h3>
       <div class="social-media">
-        <div>
           <a href="https://www.linkedin.com/in/xi-zhang-9358bb1a/">
             <svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
           </a>
-        </div>
-        <div>
           <a href="https://twitter.com/aefhm">
             <svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>Twitter</title><path d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148 13.98 13.98 0 0 0 11.82 8.292a4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"/></svg>
           </a>
-        </div>
         <div>
           <a href="https://github.com/aefhm">
             <svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
@@ -49,22 +61,7 @@ <h1>Culture Bobbin</h1>
           </a>
         </div>
       </div>
-    </nav>
-    <div class="main">
-      <article>
-        <h2>About me</h2>
-        <p>
-          My name is
-            <span class="bold">Xi</span>.
-          I currently work as an engineer in Web3! Once upon a time, I studied cultural anthropology. I really like people.
-        </p>
-        <h3>About this site</h3>
-        <p>
-          This page was made lovingly by hand without any JavaScript.
-
-          HTML should be written the way Bordier makes Yuzu butter.
-        </p>
       </article>
-    </div>
+    </main>
   </body>
 </html>
diff --git a/public/style.css b/public/style.css
index 82a4caa..ca9fde6 100755
--- a/public/style.css
+++ b/public/style.css
@@ -1,23 +1,20 @@
-/* h1 {
-  text-align: center;
-  font-size: 36px;
-  font-weight: 200;
-  max-width: 600px;
-}
-*/
-
 html {
-  background-color: bisque;
   font-family: 'Noto Sans', sans-serif;
 }
 
-body {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-auto-rows: minmax(100px, auto);
-  grid-template-areas: 
-    "header header header header"
-    "nav main main main";
+@media screen {
+  article {
+    display: grid;
+    column-gap: 20px;
+  }
+
+  nav ul {
+    display: flex;
+  }
+
+  nav li {
+    flex: 1;
+  }
 }
 
 header {
@@ -30,36 +27,33 @@ header {
   font-weight: 600;
 }
 
-.main {
-  grid-area: main;
-  padding-right: 36px;
-}
-
 svg {
   width: 20px;
   padding: 10px;
 }
 
-nav {
-  grid-area: nav;
-}
-
 nav ul {
+  border: 1px solid black;
+  display: flex;
   list-style: none;
+  padding: unset;
 }
 
 nav ul a {
+  border: 1px solid black;
+  color: inherit;
+  display: block;
   font-size: small;
   font-family: 'Noto Sans', sans-serif;
   font-weight: bolder;
-  color: inherit;
+  padding: 10px;
+  text-align: center;
   text-decoration: none;
   text-transform: UPPERCASE;
 }
 
-.description {
-  display: flex;
-  justify-content: center;
+nav ul a:hover {
+  background: azure;
 }
 
 .recipes {
@@ -69,5 +63,4 @@ nav ul a {
 
 .social-media {
   display: flex;
-  padding-left: 30px;
 }