diff --git a/src/components/home/Benefits.tsx b/src/components/home/Benefits.tsx
index f2c8738a37..53a9ee84c6 100644
--- a/src/components/home/Benefits.tsx
+++ b/src/components/home/Benefits.tsx
@@ -6,23 +6,25 @@ import BenefitsCard from "./BenefitsCard"
 
 const Benefits = (): JSX.Element => {
   return (
-    <section className="w-full pt-20 p-6 md:pb-20  lg:px-SPACE_16 bg-[#1C1D1F] grid-background">
-      <div className="sm:max-w-7xl mx-SPACE_04 sm:mx-SPACE_10 lg:mx-auto  py-SPACE_08 sm:py-SPACE_20">
-        <div>
-          <SectionTitle title="Benefits" />
-          <div className=" h-fit sm:flex-row sm:items-center sm:space-x-SPACE_10 lg:space-x-SPACE_20">
-            <Heading
-              as="h3"
-              className="text-title-large sm:text-display-tiny lg:text-display-small text-white md:w-[65%]"
-            >
-              Tailcall gives you a best-practice GraphQL backend that checks all the boxes.
-            </Heading>
+    <div className="w-full bg-[#1C1D1F] grid-background pt-20 p-6 md:pb-20">
+      <section className="lg:px-SPACE_16">
+        <div className="sm:max-w-7xl mx-SPACE_04 sm:mx-SPACE_10 lg:mx-auto  py-SPACE_08 sm:py-SPACE_20">
+          <div>
+            <SectionTitle title="Benefits" />
+            <div className=" h-fit sm:flex-row sm:items-center sm:space-x-SPACE_10 lg:space-x-SPACE_20">
+              <Heading
+                as="h3"
+                className="text-title-large sm:text-display-tiny lg:text-display-small text-white md:w-[65%]"
+              >
+                Tailcall gives you a best-practice GraphQL backend that checks all the boxes.
+              </Heading>
+            </div>
           </div>
+          <BenefitsCard />
         </div>
-        <BenefitsCard />
-        <Partners />
-      </div>
-    </section>
+      </section>
+      <Partners />
+    </div>
   )
 }
 
diff --git a/src/components/home/Partners.tsx b/src/components/home/Partners.tsx
index c969d1fb33..a49b34e620 100644
--- a/src/components/home/Partners.tsx
+++ b/src/components/home/Partners.tsx
@@ -16,7 +16,7 @@ const Partners = (): JSX.Element => {
         <span>Deploy Anywhere</span>
       </div>
       <Marquee autoFill>
-        <div className="hidden sm:flex space-x-SPACE_16 mt-SPACE_10 overflow-hidden">
+        <div className="hidden sm:flex mt-SPACE_10 overflow-hidden">
           {partnerImages.map((partner, index) => (
             <div key={index} className="h-20">
               <img src={partner.logo} alt={partner.name} className="max-w-[152px]" />