okiee fixed the styling~

pages/blog-index.vue

@@ -2,7 +2,7 @@
   <main>
     <!-- <a href="/"><-- Return Home</a> -->
     <BigButton text="<<< Return Home" href="/"/>
-    <h1>Tom's Blog</h1>
+    <h1 class="no-margin">Tom's Blog</h1>
     
     <p class="no-margin" v-if="qSupplied">Selected Tag: <strong>{{query}}</strong> <a v-if="qSupplied" href="blog-index">(Clear Search)</a></p>
     <p class="no-margin">Tag Search:
@@ -14,7 +14,7 @@
     </p>
 
     <hr>
-    <!-- <div> -->
+    <div>
       <BlogCard v-for="post in data" class="posts-list"
           :key="post.id"
           :href="post._path"
@@ -24,7 +24,7 @@
           :id="post.id"
           :tags="post.tags"
         />
-    <!-- </div> -->
+    </div>
     
 
   </main>
@@ -53,7 +53,7 @@
   var { data } = await useAsyncData('home', () => queryContent('blog').where({ tags: { $contains: query } }).sort({id:-1}).find())
 </script>
 
-<style>
+<style scoped>
   main {
     /* display: flex; */
     /* flex-direction: column; */
@@ -62,14 +62,21 @@
     margin-top: 3.5rem;
     /* gap: 0rem; */
     /* width: 80%; */
+    
   }
   
   .posts-list{
     width: 80%;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
   }
 
+
+
   .no-margin{
-    margin: 0
+    margin: 0;
+    text-align: center;
   }
 
   .no-posts{

pages/blog/[...slug].vue

@@ -29,7 +29,7 @@
     </main> -->
 </template>
   
-<style>
+<style scoped>
   .post{
     width: 50%;
     
@@ -38,6 +38,7 @@
   /* i wonder if this will cause issues */
   img{ 
     width: 100%;
+    
   }
 
   @media (max-width: 1000px){

pages/chrono-chamber.vue

@@ -8,6 +8,6 @@
 
 </script>
 
-<style>
+<style scoped>
 
 </style>

pages/homepage.vue

@@ -18,7 +18,7 @@
 
 </template>
 
-<style>
+<style scoped>
     .container{
         padding-left: 1cm;
     }

pages/index.vue

@@ -144,16 +144,34 @@ var { data } = await useAsyncData('home', () => queryContent('blog').sort({id:-1
 </template>
 
 <style scoped>
+h1{
+  text-align: center;
+}
+
+
+
 .container {
   display: flex;
-  width: 100%
+  margin-left: 10%;
+  margin-right: 10%;
+  justify-content: center;
     
 }
 
+@media (max-width: 1000px){
+  .container{
+    margin: 0;
+  }
+  
+}
+
 .featured-container{
   display: flex;
-  width: 80%;
+  width: 100%;
   justify-content: center;
+  
+  /* margin-left: auto;
+  margin-right: auto; */
   /* margin-left: auto;
   margin-right: auto; */
 }
@@ -163,6 +181,8 @@ var { data } = await useAsyncData('home', () => queryContent('blog').sort({id:-1
   flex-direction: column;
   width: 80%;
   justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .small-image-pls {
@@ -232,7 +252,7 @@ var { data } = await useAsyncData('home', () => queryContent('blog').sort({id:-1
 }
 </style>
 
-<style>
+<style scoped>
 main {
   /* display: flex;
   flex-direction: column;
@@ -241,13 +261,7 @@ main {
   /* margin-top: 3.5rem; */
   /* gap: 2rem; */
 }
-hr {
-  width: 100%;
-  height: 0px;
-  border: 5px  var(--accent);
-  border-style: dotted none none none;
-  max-width: var(--max-width);
-}
+
 .container > div {
   /* display: flex;
   flex-direction: column; */

pages/newIndex.vue

@@ -13,6 +13,6 @@
   });
 </script>
 
-<style>
+<style scoped>
 
 </style>