diff --git a/src/components/FeatureSection.vue b/src/components/FeatureSection.vue
index bfc7130..b4379b3 100644
--- a/src/components/FeatureSection.vue
+++ b/src/components/FeatureSection.vue
@@ -4,21 +4,21 @@
       <Heading2> Installed Vite plugins </Heading2>
     </div>
     <div class="flex flex-wrap -m-4">
-      <div class="pr-4 py-4 md:w-1/3">
+      <div class="pr-4 py-4 xs:pl-4 md:w-1/3 w-full">
         <Feature
           title="vite-plugin-vue2"
           text="Vue 2 support for Vite"
           url="https://github.com/underfin/vite-plugin-vue2"
         />
       </div>
-      <div class="p-4 md:w-1/3">
+      <div class="p-4 md:w-1/3 w-full">
         <Feature
           title="vite-plugin-components"
           text="On demand components auto importing for Vite"
           url="https://github.com/antfu/vite-plugin-components"
         />
       </div>
-      <div class="pl-4 py-4 md:w-1/3">
+      <div class="pl-4 py-4 xs:pr-4 md:w-1/3 w-full">
         <Feature
           title="vite-plugin-windicss"
           text="Windi CSS for Vit"
diff --git a/src/components/HeroSection.vue b/src/components/HeroSection.vue
index c9f99f1..eb8f923 100644
--- a/src/components/HeroSection.vue
+++ b/src/components/HeroSection.vue
@@ -1,6 +1,6 @@
 <template>
   <section
-    class="text-gray-600 body-fontcontainer mx-auto flex py-12 md:flex-row flex-col items-center"
+    class="text-gray-600 body-font container mx-auto flex py-12 md:flex-row flex-col items-center px-5"
   >
     <div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
       <img