fix: padding, margin, and width issues

src/components/ui/sections/Applications.astro

@@ -21,7 +21,7 @@ const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shado
 ---
 
 <section class:list={['flex flex-col gap-4', Astro.props.className]}>
-  <div class="ml-8 grid grid-cols-1 gap-3 md:grid-cols-2 print:flex print:flex-col">
+  <div class="grid grid-cols-1 gap-3 md:grid-cols-2 print:flex print:flex-col">
     {
       applications.map((application: Application) => {
         return (

src/components/ui/sections/FeaturesSection.astro

@@ -11,7 +11,7 @@ const global = await directus.request(readSingleton('site_global'));
   <div
     class="flex flex-col items-center justify-center gap-y-2 sm:flex-row sm:gap-x-12 sm:gap-y-0 lg:gap-x-24"
   >
-    <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
+    <div class="max-w-5xl sm:px-6 lg:px-8">
       <div class="flex flex-wrap gap-6 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3 justify-center">
         <FeaturesCard
           title="Cloud Engineer"

src/pages/apps.astro

@@ -36,8 +36,8 @@ const global = await directus.request(readSingleton('site_global'));
     alt={global.applications_image_alt}
   />
 
-  <section class="mx-auto max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
-    <main class="relative grid grid-cols-1 md:grid-cols-6 gap-12 p-8 md:p-16 xl:gap-24 max-w-7xl mx-auto">
+  <section class="mx-auto max-w-340 px-4 sm:px-6 lg:px-8 lg:py-14 pb-10">
+    <main class="relative grid grid-cols-1 md:grid-cols-6 gap-12 p-2 md:p-16 xl:gap-24 max-w-7xl mx-auto">
       <div class="space-y-12 col-span-1 md:col-span-6">
         <Applications className="smooth-reveal-2" />
       </div>