fix random issues

src/scss/pages/_home.scss

@@ -3,6 +3,9 @@ main {
     display: flex;
     justify-content: space-between;
     padding: 60px 60px;
+    margin: 0 auto;
+    margin-bottom: 180px;
+    max-width: 1920px;
 
     .content {
         margin-top: 60px;
@@ -27,8 +30,9 @@ main {
 
     .underline {
         display: inline-block;
+        z-index: 2;
         position: relative;
-        color: $primary;
+        color: $primary-dark;
 
         &::after {
             position: absolute;
@@ -49,6 +53,7 @@ main {
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    margin-bottom: 180px;
 
 
     .panel:nth-child(2) {
@@ -58,11 +63,12 @@ main {
 
 .about {
     width: 100%;
-    margin-top: 150px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    margin-bottom: 180px;
+    padding-bottom: 100px;
 
     .profile {
         background: white;
@@ -77,7 +83,7 @@ main {
     }
 
     .content {
-        max-width: 1000px;
+        max-width: 70%;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -123,7 +129,8 @@ main {
 }
 
 .contact {
-    margin: 120px 0;
+    margin-top: 50px;
+    margin-bottom: 180px;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -134,7 +141,7 @@ main {
         padding: 15px 30px;
         max-width: 500px;
         width: 100%;
-        background: $quaternary;
+        background: $tertiary;
         border-radius: 5px;
         box-shadow: 0 3px 15px rgba($secondary, 20%);
 

src/views/Home.vue

@@ -1,25 +1,29 @@
 <template>
-<div class="container">
+<!-- TODO: FIX INDENTATION -->
+<div class="wrapper">
+<div class="container bg-alternate">
   <main>
-    <div class="content">
-      <div class="tag">
-        Hey! I'm <span class="underline">Ayush Mukherjee.</span>
-        <br>
-        I'm a software engineer and open-source enthusiast.
-      </div>
-      <div class="para">
+      <div class="content">
+        <div class="tag">
+          Hey! I'm <span class="underline">Ayush Mukherjee.</span>
+          <br>
+          I'm a software engineer and open-source enthusiast.
+        </div>
+        <div class="para">
           <p>This website is the digital home of my projects. You can wait for my upcoming blog, learn more <span class="underline">about me</span> or <span class="underline">say hi!</span></p>
+        </div>
+        <div class="cta">
+          <a href="#about" class="btn">About Me</a>
+          <a href="https://github.com/ayush123460" target="_blank" class="btn btn-secondary">GitHub Profile</a>
+        </div>
       </div>
-      <div class="cta">
-        <a href="#work" class="btn">About Me</a>
-        <a href="#contact" class="btn btn-secondary">GitHub Profile</a>
+      <div class="illustration">
+        <img src="@/assets/illustration.png" alt="Illustration">
       </div>
-    </div>
-    <div class="illustration">
-      <img src="@/assets/illustration.png" alt="Illustration">
-    </div>
   </main>
+</div>
 
+<div class="container">
   <div class="title" id="work">
     Work / Projects
   </div>
@@ -69,7 +73,9 @@
       </div>
     </div>
   </section>
+</div>
 
+<div class="container bg-alternate">
   <div class="title" id="about">
     About Me
   </div>
@@ -93,7 +99,9 @@
       </div>
     </div>
   </section>
+</div>
 
+<div class="container">
   <div class="title" id="contact">
     Contact Me
   </div>
@@ -139,6 +147,7 @@
     </div>
   </section>
 </div>
+</div>
 </template>
 
 <script>