okiee fixed the styling~

components/BigButton.vue

@@ -1,7 +1,9 @@
 <template>
-  <a class="big-button" :href="props.href">
-    <h2>{{props.text}}</h2>
-  </a>
+  <div class="button-box">
+    <a class="big-button" :href="props.href">
+      <h2>{{props.text}}</h2>
+    </a>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -17,6 +19,15 @@
     color: black;
     width: 80%;
     text-decoration: none;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    /* justify-self: center; */
+    
+  }
+
+  .button-box{
+    width: 100%;
     
   }
 

components/BlogCard.vue

@@ -37,6 +37,7 @@ const props = defineProps({
 
   h2{
     margin: 0;
+    text-align: center;
   }
 
   .blog-header{

components/BoldButton.vue

@@ -14,7 +14,7 @@ const props = defineProps({
     
 </template>
 
-<style>
+<style scoped>
     .button {
         background-color: #3f0064; 
         border: none;

components/ProjectCard.vue

@@ -18,7 +18,7 @@ const props = defineProps({
     
 </template>
 
-<style>
+<style scoped>
     .image-container{
         position: relative;
         text-align: center;

components/Socials.vue

@@ -4,7 +4,7 @@
     </div>
   </template>
   
-  <style>
+  <style scoped>
   .socials {
     display: flex;
     flex-wrap: wrap;

components/TextCard.vue

@@ -22,7 +22,7 @@ const props = defineProps({
     
 </template>
 
-<style>
+<style scoped>
     .text-container{
         position: relative;
         text-align: center;