From eeeacc9b031d46813030653c63809bb96dec2f7b Mon Sep 17 00:00:00 2001
From: imick-io <153135517+imick-io@users.noreply.github.com>
Date: Fri, 22 May 2026 17:36:29 -0400
Subject: [PATCH] feat(website): constrain sections to max-w-9xl on wide
 screens (#12428)

Add max-w-9xl mx-auto to section/container wrappers across the website
so layout stays centered and capped at 96rem on screens wider than
1536px.

## Summary

<!-- One sentence describing what changed and why. -->

## Changes

- **What**: <!-- Core functionality added/modified -->
- **Breaking**: <!-- Any breaking changes (if none, remove this line)
-->
- **Dependencies**: <!-- New dependencies (if none, remove this line)
-->

## Review Focus

<!-- Critical design decisions or edge cases that need attention -->

<!-- If this PR fixes an issue, uncomment and update the line below -->
<!-- Fixes #ISSUE_NUMBER -->

## Screenshots (if applicable)

<!-- Add screenshots or video recording to help explain your changes -->

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/website/src/components/about/CareersSection.vue         | 2 +-
 apps/website/src/components/about/HeroSection.vue            | 2 +-
 apps/website/src/components/about/OurValuesSection.vue       | 2 +-
 apps/website/src/components/about/StorySection.vue           | 2 +-
 apps/website/src/components/about/ValuesSection.vue          | 2 +-
 apps/website/src/components/common/FAQSection.vue            | 2 +-
 apps/website/src/components/common/ProductCardsSection.vue   | 4 +++-
 apps/website/src/components/customers/FeedbackSection.vue    | 4 ++--
 apps/website/src/components/customers/HeroSection.vue        | 2 +-
 apps/website/src/components/customers/StorySection.vue       | 2 +-
 apps/website/src/components/customers/VideoSection.vue       | 2 +-
 apps/website/src/components/gallery/ContactSection.vue       | 2 +-
 apps/website/src/components/gallery/GallerySection.vue       | 5 ++++-
 apps/website/src/components/gallery/HeroSection.vue          | 4 +++-
 apps/website/src/components/home/BuildWhatSection.vue        | 2 +-
 .../src/components/home/CaseStudySpotlightSection.vue        | 4 +++-
 apps/website/src/components/home/GetStartedSection.vue       | 4 +++-
 apps/website/src/components/home/HeroSection.vue             | 2 +-
 apps/website/src/components/home/ProductShowcaseSection.vue  | 5 ++++-
 apps/website/src/components/pricing/PriceSection.vue         | 4 ++--
 apps/website/src/components/pricing/WhatsIncludedSection.vue | 2 +-
 .../website/src/components/product/cloud/AudienceSection.vue | 2 +-
 apps/website/src/components/product/cloud/PricingSection.vue | 2 +-
 .../components/product/enterprise/OrchestrationSection.vue   | 2 +-
 .../src/components/product/local/EcoSystemSection.vue        | 2 +-
 .../src/components/product/shared/AIModelsSection.vue        | 4 +++-
 .../src/components/product/shared/CardGridSection.vue        | 2 +-
 .../src/components/product/shared/FeatureShowcaseSection.vue | 2 +-
 apps/website/src/components/product/shared/ReasonSection.vue | 2 +-
 29 files changed, 47 insertions(+), 31 deletions(-)

diff --git a/apps/website/src/components/about/CareersSection.vue b/apps/website/src/components/about/CareersSection.vue
index aad614ca1e..20c50e5ddb 100644
--- a/apps/website/src/components/about/CareersSection.vue
+++ b/apps/website/src/components/about/CareersSection.vue
@@ -10,7 +10,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 </script>
 
 <template>
-  <section class="px-6 py-24 lg:px-20 lg:py-32">
+  <section class="max-w-9xl mx-auto px-6 py-24 lg:px-20 lg:py-32">
     <GlassCard
       class="mx-auto mt-20 flex flex-col gap-12 lg:flex-row lg:items-stretch lg:gap-8"
     >
diff --git a/apps/website/src/components/about/HeroSection.vue b/apps/website/src/components/about/HeroSection.vue
index 8b8baf9f55..2bdf109a23 100644
--- a/apps/website/src/components/about/HeroSection.vue
+++ b/apps/website/src/components/about/HeroSection.vue
@@ -74,7 +74,7 @@ useHeroAnimation({
     </div>
 
     <!-- Video -->
-    <div ref="videoRef" class="px-4 pb-20 lg:px-20 lg:pb-40">
+    <div ref="videoRef" class="max-w-9xl mx-auto px-4 pb-20 lg:px-20 lg:pb-40">
       <VideoPlayer
         src="https://media.comfy.org/website/about/co-founders.webm"
         poster="https://media.comfy.org/website/about/co-founders-poster.webp"
diff --git a/apps/website/src/components/about/OurValuesSection.vue b/apps/website/src/components/about/OurValuesSection.vue
index 729d798967..767ebe19cd 100644
--- a/apps/website/src/components/about/OurValuesSection.vue
+++ b/apps/website/src/components/about/OurValuesSection.vue
@@ -33,7 +33,7 @@ const values: {
 </script>
 
 <template>
-  <section class="px-6 py-24 lg:px-20 lg:py-32">
+  <section class="max-w-9xl mx-auto px-6 py-24 lg:px-20 lg:py-32">
     <div class="mx-auto max-w-5xl text-center">
       <SectionLabel>
         {{ t('about.values.label', locale) }}
diff --git a/apps/website/src/components/about/StorySection.vue b/apps/website/src/components/about/StorySection.vue
index 2272c95b15..cc8020ec90 100644
--- a/apps/website/src/components/about/StorySection.vue
+++ b/apps/website/src/components/about/StorySection.vue
@@ -16,7 +16,7 @@ const investors = [
 </script>
 
 <template>
-  <section class="px-6 py-24 lg:px-20 lg:py-32">
+  <section class="max-w-9xl mx-auto px-6 py-24 lg:px-20 lg:py-32">
     <div class="mx-auto text-center">
       <span
         class="text-primary-comfy-yellow text-xs font-semibold tracking-widest uppercase"
diff --git a/apps/website/src/components/about/ValuesSection.vue b/apps/website/src/components/about/ValuesSection.vue
index b32e10f7c4..ed48f1260d 100644
--- a/apps/website/src/components/about/ValuesSection.vue
+++ b/apps/website/src/components/about/ValuesSection.vue
@@ -14,7 +14,7 @@ const reasons: TranslationKey[] = [
 </script>
 
 <template>
-  <section class="px-6 py-24 lg:px-20 lg:py-32">
+  <section class="max-w-9xl mx-auto px-6 py-24 lg:px-20 lg:py-32">
     <WireNodeLayout :reasons right-card-padding="p-6" :locale="locale">
       <template #right-card>
         <img
diff --git a/apps/website/src/components/common/FAQSection.vue b/apps/website/src/components/common/FAQSection.vue
index 241855277b..f65ef5b9c8 100644
--- a/apps/website/src/components/common/FAQSection.vue
+++ b/apps/website/src/components/common/FAQSection.vue
@@ -41,7 +41,7 @@ function toggle(index: number) {
 </script>
 
 <template>
-  <section class="px-4 py-24 md:px-20 md:py-40">
+  <section class="max-w-9xl mx-auto px-4 py-24 md:px-20 md:py-40">
     <div class="flex flex-col gap-6 md:flex-row md:gap-16">
       <!-- Left heading -->
       <div
diff --git a/apps/website/src/components/common/ProductCardsSection.vue b/apps/website/src/components/common/ProductCardsSection.vue
index 24a094430e..1ab970322c 100644
--- a/apps/website/src/components/common/ProductCardsSection.vue
+++ b/apps/website/src/components/common/ProductCardsSection.vue
@@ -46,7 +46,9 @@ const cards = excludeProduct
 </script>
 
 <template>
-  <section class="bg-primary-comfy-ink px-0 py-20 lg:px-20 lg:py-24">
+  <section
+    class="bg-primary-comfy-ink max-w-9xl mx-auto px-0 py-20 lg:px-20 lg:py-24"
+  >
     <!-- Header -->
     <div class="flex flex-col items-center px-4 text-center">
       <SectionLabel v-if="labelKey">
diff --git a/apps/website/src/components/customers/FeedbackSection.vue b/apps/website/src/components/customers/FeedbackSection.vue
index 0039847150..70699c155a 100644
--- a/apps/website/src/components/customers/FeedbackSection.vue
+++ b/apps/website/src/components/customers/FeedbackSection.vue
@@ -45,11 +45,11 @@ const progressPercent = computed(() => `${progress.value * 100}%`)
 </script>
 
 <template>
-  <section class="px-6 py-16 lg:px-16 lg:py-24">
+  <section class="max-w-9xl mx-auto px-6 py-16 lg:px-16 lg:py-24">
     <!-- Scrollable track -->
     <div
       ref="trackRef"
-      class="scrollbar-none flex snap-x snap-mandatory gap-12 overflow-x-auto lg:gap-20"
+      class="flex snap-x snap-mandatory scrollbar-none gap-12 overflow-x-auto lg:gap-20"
     >
       <div
         v-for="(fb, i) in feedbacks"
diff --git a/apps/website/src/components/customers/HeroSection.vue b/apps/website/src/components/customers/HeroSection.vue
index bdd5296a4e..5ff5903d3c 100644
--- a/apps/website/src/components/customers/HeroSection.vue
+++ b/apps/website/src/components/customers/HeroSection.vue
@@ -72,7 +72,7 @@ function handleLogoLoad() {
     </div>
 
     <!-- Video -->
-    <div ref="videoRef" class="px-4 pb-20 lg:px-20 lg:pb-40">
+    <div ref="videoRef" class="max-w-9xl mx-auto px-4 pb-20 lg:px-20 lg:pb-40">
       <VideoPlayer
         src="https://media.comfy.org/website/customers/blackmath/video.webm"
         poster="https://media.comfy.org/website/customers/blackmath/poster.webp"
diff --git a/apps/website/src/components/customers/StorySection.vue b/apps/website/src/components/customers/StorySection.vue
index 8d5bd7c613..cc644e9f5f 100644
--- a/apps/website/src/components/customers/StorySection.vue
+++ b/apps/website/src/components/customers/StorySection.vue
@@ -10,7 +10,7 @@ const prefix = locale === 'zh-CN' ? '/zh-CN' : ''
 
 <template>
   <section
-    class="grid grid-cols-1 gap-6 px-6 py-16 lg:grid-cols-2 lg:px-16 lg:py-24"
+    class="max-w-9xl mx-auto grid grid-cols-1 gap-6 px-6 py-16 lg:grid-cols-2 lg:px-16 lg:py-24"
   >
     <a
       v-for="story in customerStories"
diff --git a/apps/website/src/components/customers/VideoSection.vue b/apps/website/src/components/customers/VideoSection.vue
index 6032feafe7..f2690358a9 100644
--- a/apps/website/src/components/customers/VideoSection.vue
+++ b/apps/website/src/components/customers/VideoSection.vue
@@ -7,7 +7,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 </script>
 
 <template>
-  <section class="px-6 py-16 lg:px-20 lg:py-40">
+  <section class="max-w-9xl mx-auto px-6 py-16 lg:px-20 lg:py-40">
     <VideoPlayer
       src="https://media.comfy.org/website/customers/silverside/video.webm"
       poster="https://media.comfy.org/website/customers/silverside/poster.webp"
diff --git a/apps/website/src/components/gallery/ContactSection.vue b/apps/website/src/components/gallery/ContactSection.vue
index 07c52b4e18..7f34717a4c 100644
--- a/apps/website/src/components/gallery/ContactSection.vue
+++ b/apps/website/src/components/gallery/ContactSection.vue
@@ -7,7 +7,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 
 <template>
   <section
-    class="flex flex-col items-center px-4 pt-16 pb-24 text-center lg:px-20 lg:pt-20 lg:pb-40"
+    class="max-w-9xl mx-auto flex flex-col items-center px-4 pt-16 pb-24 text-center lg:px-20 lg:pt-20 lg:pb-40"
   >
     <span
       class="text-primary-comfy-yellow text-sm font-bold tracking-widest uppercase"
diff --git a/apps/website/src/components/gallery/GallerySection.vue b/apps/website/src/components/gallery/GallerySection.vue
index 26aff9f1e9..0a173a5a3b 100644
--- a/apps/website/src/components/gallery/GallerySection.vue
+++ b/apps/website/src/components/gallery/GallerySection.vue
@@ -223,7 +223,10 @@ while (idx < items.length) {
 </script>
 
 <template>
-  <section data-testid="gallery-grid" class="px-4 pb-20 lg:px-20">
+  <section
+    data-testid="gallery-grid"
+    class="max-w-9xl mx-auto px-4 pb-20 lg:px-20"
+  >
     <!-- Desktop grid -->
     <div
       class="rounded-5xl bg-transparency-white-t4 hidden flex-col gap-2 p-2 lg:flex"
diff --git a/apps/website/src/components/gallery/HeroSection.vue b/apps/website/src/components/gallery/HeroSection.vue
index cb23ba5ff9..8352b2b996 100644
--- a/apps/website/src/components/gallery/HeroSection.vue
+++ b/apps/website/src/components/gallery/HeroSection.vue
@@ -8,7 +8,9 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 </script>
 
 <template>
-  <section class="flex flex-col items-center px-6 pt-36 pb-16 text-center">
+  <section
+    class="max-w-9xl mx-auto flex flex-col items-center px-6 pt-36 pb-16 text-center"
+  >
     <SectionLabel>
       {{ t('gallery.label', locale) }}
     </SectionLabel>
diff --git a/apps/website/src/components/home/BuildWhatSection.vue b/apps/website/src/components/home/BuildWhatSection.vue
index a53e8ce66f..2058acf098 100644
--- a/apps/website/src/components/home/BuildWhatSection.vue
+++ b/apps/website/src/components/home/BuildWhatSection.vue
@@ -15,7 +15,7 @@ const row2 = [
 
 <template>
   <section
-    class="bg-primary-comfy-ink flex flex-col items-center px-4 py-24 lg:px-6 lg:py-32"
+    class="bg-primary-comfy-ink max-w-9xl mx-auto flex flex-col items-center px-4 py-24 lg:px-6 lg:py-32"
   >
     <!-- Node rows -->
     <div
diff --git a/apps/website/src/components/home/CaseStudySpotlightSection.vue b/apps/website/src/components/home/CaseStudySpotlightSection.vue
index 9b033a1906..1c5a3194b5 100644
--- a/apps/website/src/components/home/CaseStudySpotlightSection.vue
+++ b/apps/website/src/components/home/CaseStudySpotlightSection.vue
@@ -12,7 +12,9 @@ const routes = getRoutes(locale)
 </script>
 
 <template>
-  <section class="bg-primary-comfy-ink px-4 py-20 lg:px-20 lg:py-24">
+  <section
+    class="bg-primary-comfy-ink max-w-9xl mx-auto px-4 py-20 lg:px-20 lg:py-24"
+  >
     <GlassCard
       class="flex flex-col gap-12 lg:flex-row lg:items-stretch lg:gap-8"
     >
diff --git a/apps/website/src/components/home/GetStartedSection.vue b/apps/website/src/components/home/GetStartedSection.vue
index 2cb66a3327..3ccf4ca7aa 100644
--- a/apps/website/src/components/home/GetStartedSection.vue
+++ b/apps/website/src/components/home/GetStartedSection.vue
@@ -36,7 +36,9 @@ const steps = [
 </script>
 
 <template>
-  <section class="bg-primary-comfy-ink px-4 py-20 lg:px-20 lg:py-24">
+  <section
+    class="bg-primary-comfy-ink max-w-9xl mx-auto px-4 py-20 lg:px-20 lg:py-24"
+  >
     <div class="flex flex-col gap-12 lg:flex-row lg:gap-8">
       <!-- Left heading -->
       <div
diff --git a/apps/website/src/components/home/HeroSection.vue b/apps/website/src/components/home/HeroSection.vue
index 7618385e33..37666cd8e5 100644
--- a/apps/website/src/components/home/HeroSection.vue
+++ b/apps/website/src/components/home/HeroSection.vue
@@ -15,7 +15,7 @@ const { loaded: logoLoaded } = useHeroLogo(logoContainer)
 
 <template>
   <section
-    class="relative flex min-h-auto flex-col lg:flex-row lg:items-center"
+    class="max-w-9xl relative mx-auto flex min-h-auto flex-col lg:flex-row lg:items-center"
   >
     <div
       ref="logoContainer"
diff --git a/apps/website/src/components/home/ProductShowcaseSection.vue b/apps/website/src/components/home/ProductShowcaseSection.vue
index 213a82baf9..4cebc3e1e1 100644
--- a/apps/website/src/components/home/ProductShowcaseSection.vue
+++ b/apps/website/src/components/home/ProductShowcaseSection.vue
@@ -55,7 +55,10 @@ watch(activeIndex, (current, previous) => {
 </script>
 
 <template>
-  <section ref="sectionRef" class="px-4 py-20 lg:px-20 lg:py-24">
+  <section
+    ref="sectionRef"
+    class="max-w-9xl mx-auto px-4 py-20 lg:px-20 lg:py-24"
+  >
     <!-- Section header -->
     <div class="flex flex-col items-center text-center">
       <NodeBadge :segments="badgeSegments" segment-class="" />
diff --git a/apps/website/src/components/pricing/PriceSection.vue b/apps/website/src/components/pricing/PriceSection.vue
index ccd8192a3c..b51fa27e07 100644
--- a/apps/website/src/components/pricing/PriceSection.vue
+++ b/apps/website/src/components/pricing/PriceSection.vue
@@ -121,7 +121,7 @@ const activePlanIndex = ref(0)
 </script>
 
 <template>
-  <section class="px-4 py-16 lg:px-20 lg:py-14">
+  <section class="max-w-9xl mx-auto px-4 py-16 lg:px-20 lg:py-14">
     <!-- Header -->
     <div class="mx-auto mb-8 max-w-3xl text-center lg:mb-10">
       <h1
@@ -135,7 +135,7 @@ const activePlanIndex = ref(0)
     </div>
 
     <!-- Mobile plan tabs -->
-    <div class="scrollbar-none mb-6 flex gap-2 overflow-x-auto lg:hidden">
+    <div class="mb-6 flex scrollbar-none gap-2 overflow-x-auto lg:hidden">
       <button
         v-for="(plan, index) in plans"
         :key="plan.id"
diff --git a/apps/website/src/components/pricing/WhatsIncludedSection.vue b/apps/website/src/components/pricing/WhatsIncludedSection.vue
index f67a9b94e2..56b6662c8a 100644
--- a/apps/website/src/components/pricing/WhatsIncludedSection.vue
+++ b/apps/website/src/components/pricing/WhatsIncludedSection.vue
@@ -60,7 +60,7 @@ const features: IncludedFeature[] = [
 </script>
 
 <template>
-  <section class="px-4 py-16 lg:px-20 lg:py-24">
+  <section class="max-w-9xl mx-auto px-4 py-16 lg:px-20 lg:py-24">
     <div class="mx-auto w-full lg:grid lg:grid-cols-[280px_1fr] lg:gap-x-16">
       <!-- Heading -->
       <div
diff --git a/apps/website/src/components/product/cloud/AudienceSection.vue b/apps/website/src/components/product/cloud/AudienceSection.vue
index b54ced7b98..affd3b6ffb 100644
--- a/apps/website/src/components/product/cloud/AudienceSection.vue
+++ b/apps/website/src/components/product/cloud/AudienceSection.vue
@@ -25,7 +25,7 @@ const cards = [
 </script>
 
 <template>
-  <section class="px-4 pt-24 lg:px-20 lg:pt-40">
+  <section class="max-w-9xl mx-auto px-4 pt-24 lg:px-20 lg:pt-40">
     <h2
       class="text-primary-comfy-canvas text-3.5xl/tight mx-auto max-w-3xl text-center font-light lg:text-5xl/tight"
     >
diff --git a/apps/website/src/components/product/cloud/PricingSection.vue b/apps/website/src/components/product/cloud/PricingSection.vue
index 347bb8ee27..59583da938 100644
--- a/apps/website/src/components/product/cloud/PricingSection.vue
+++ b/apps/website/src/components/product/cloud/PricingSection.vue
@@ -10,7 +10,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 
 <template>
   <section
-    class="bg-transparency-white-t4 rounded-5xl mx-4 mt-4 mb-24 p-2 lg:mx-20 lg:mt-8 lg:mb-40"
+    class="bg-transparency-white-t4 rounded-5xl max-w-9xl mx-auto mt-4 mb-24 p-2 px-4 lg:mt-8 lg:mb-40 lg:px-20"
   >
     <div
       class="bg-primary-comfy-yellow flex flex-col gap-24 rounded-4xl p-8 lg:flex-row lg:items-end lg:justify-between"
diff --git a/apps/website/src/components/product/enterprise/OrchestrationSection.vue b/apps/website/src/components/product/enterprise/OrchestrationSection.vue
index 923f686caf..12880414cd 100644
--- a/apps/website/src/components/product/enterprise/OrchestrationSection.vue
+++ b/apps/website/src/components/product/enterprise/OrchestrationSection.vue
@@ -442,7 +442,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <section class="px-4 py-24 lg:px-20">
+  <section class="max-w-9xl mx-auto px-4 py-24 lg:px-20">
     <GlassCard
       class="flex flex-col gap-8 lg:flex-row lg:items-stretch lg:gap-16"
     >
diff --git a/apps/website/src/components/product/local/EcoSystemSection.vue b/apps/website/src/components/product/local/EcoSystemSection.vue
index 3778729c8f..18d3fb436c 100644
--- a/apps/website/src/components/product/local/EcoSystemSection.vue
+++ b/apps/website/src/components/product/local/EcoSystemSection.vue
@@ -10,7 +10,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 </script>
 
 <template>
-  <section class="px-4 py-24 lg:px-20 lg:py-40">
+  <section class="max-w-9xl mx-auto px-4 py-24 lg:px-20 lg:py-40">
     <div
       class="bg-transparency-white-t4 rounded-5xl flex flex-col-reverse items-stretch gap-10 p-2 lg:flex-row lg:gap-8"
     >
diff --git a/apps/website/src/components/product/shared/AIModelsSection.vue b/apps/website/src/components/product/shared/AIModelsSection.vue
index 53cffb41dc..2fc444b9e8 100644
--- a/apps/website/src/components/product/shared/AIModelsSection.vue
+++ b/apps/website/src/components/product/shared/AIModelsSection.vue
@@ -77,7 +77,9 @@ function getCardClass(layoutClass: string): string {
 </script>
 
 <template>
-  <section class="bg-primary-comfy-ink px-4 py-24 lg:px-20 lg:py-40">
+  <section
+    class="bg-primary-comfy-ink max-w-9xl mx-auto px-4 py-24 lg:px-20 lg:py-40"
+  >
     <div class="mx-auto flex w-full max-w-7xl flex-col items-center">
       <p
         class="text-primary-comfy-yellow text-center text-sm font-bold tracking-widest uppercase"
diff --git a/apps/website/src/components/product/shared/CardGridSection.vue b/apps/website/src/components/product/shared/CardGridSection.vue
index 270e0613e3..e122f859d7 100644
--- a/apps/website/src/components/product/shared/CardGridSection.vue
+++ b/apps/website/src/components/product/shared/CardGridSection.vue
@@ -11,7 +11,7 @@ defineProps<{
 </script>
 
 <template>
-  <section class="px-4 py-24 lg:px-20">
+  <section class="max-w-9xl mx-auto px-4 py-24 lg:px-20">
     <SectionHeader>
       {{ heading }}
       <template v-if="subtitle" #subtitle>
diff --git a/apps/website/src/components/product/shared/FeatureShowcaseSection.vue b/apps/website/src/components/product/shared/FeatureShowcaseSection.vue
index 99f76e8e61..b8ae3046cf 100644
--- a/apps/website/src/components/product/shared/FeatureShowcaseSection.vue
+++ b/apps/website/src/components/product/shared/FeatureShowcaseSection.vue
@@ -22,7 +22,7 @@ defineProps<{
 </script>
 
 <template>
-  <section class="px-4 py-24 lg:px-20">
+  <section class="max-w-9xl mx-auto px-4 py-24 lg:px-20">
     <SectionHeader>
       {{ heading }}
       <template #subtitle>
diff --git a/apps/website/src/components/product/shared/ReasonSection.vue b/apps/website/src/components/product/shared/ReasonSection.vue
index 135c729fae..6c5567b0b8 100644
--- a/apps/website/src/components/product/shared/ReasonSection.vue
+++ b/apps/website/src/components/product/shared/ReasonSection.vue
@@ -29,7 +29,7 @@ const {
 
 <template>
   <section
-    class="flex flex-col gap-4 px-4 py-24 lg:flex-row lg:gap-16 lg:px-20 lg:py-40"
+    class="max-w-9xl mx-auto flex flex-col gap-4 px-4 py-24 lg:flex-row lg:gap-16 lg:px-20 lg:py-40"
   >
     <!-- Left heading -->
     <div