Update padding inline

index.html

@@ -43,7 +43,7 @@
     @dragstart.prevent
   >
     <nav class="sticky top-0 bg-inherit border-b border-gray-300 z-[1]">
-      <div class="max-w-screen-xl mx-auto px-4 py-2 flex items-center gap-x-2 md:gap-x-4">
+      <div class="max-w-screen-xl mx-auto px-4 sm:px-8 py-2 flex items-center gap-x-2 md:gap-x-4">
         <button
           class="p-2 rounded-full hover:bg-gray-200 transition md:hidden"
           x-html="svg('menu')"
@@ -331,7 +331,7 @@
     </aside>
 
     <section id="announcement" class="bg-gray-200 border-b border-gray-300">
-      <div class="mx-auto max-w-screen-xl px-4 flex text-sm font-medium">
+      <div class="mx-auto max-w-screen-xl px-4 sm:px-8 flex text-sm font-medium">
         <a
           href="https://github.com/rayc2045/Hyper"
           rel="noreferrer"
@@ -356,7 +356,7 @@
       x-init="await router.init()"
       @hashchange.window="sideMenu.close(); await scrollToTop(); router.updatePath(); router.renderPage();"
     >
-      <div class="max-w-screen-xl mx-auto px-4 py-12">
+      <div class="max-w-screen-xl mx-auto px-4 sm:px-8 py-12">
         <h1
           x-text="router.currentRoute.title"
           class="mb-2 text-4xl font-bold"
@@ -371,7 +371,7 @@
     </main>
 
     <footer class="border-t border-gray-300">
-      <div class="max-w-screen-xl mx-auto px-4 py-8 lg:py-12">
+      <div class="max-w-screen-xl mx-auto px-4 sm:px-8 py-8 lg:py-12">
         <aside class="grid gap-y-10 lg:flex lg:gap-x-40 xl:gap-x-64">
           <section>
             <h4