fix: remove horizontal scrolling & fix white bg on xl screen

Author: ztest95

src/components/features/BenefitsSection/BenefitsSection.tsx

@@ -6,7 +6,7 @@ import { BenefitsContent } from "./BenefitsContent";
 export default function BenefitsSection() {
 	return (
 		<section>
-			<header className="my-24">
+			<header className="py-24">
 				<h2
 					style={{
 						["--bg-image-before" as string]: `url(${yellowStar.src})`,

src/components/features/HeroSection/HeroContainer.tsx

@@ -4,6 +4,6 @@ interface ContainerProps {
 	className?: string;
 }
 export function HeroContainer({ children, className }: ContainerProps) {
-    return <div className={cn("bg-background text-foreground w-screen min-h-screen relative overflow-x-hidden pt-22 lg:pt-28 2xl:pt-40", className)} data-testid="hero-container">{children}</div>;
+    return <div className={cn("bg-background text-foreground w-full min-h-screen relative overflow-x-hidden pt-22 lg:pt-28 2xl:pt-40", className)} data-testid="hero-container">{children}</div>;
 
 }

src/components/layout.tsx/Layout.tsx

@@ -2,5 +2,11 @@
 import React, { PropsWithChildren } from "react";
 
 export const Layout: React.FC<PropsWithChildren> = ({ children }) => {
-	return <div className="container lg:container-lg bg-background text-foreground antialiased box-border">{children}</div>;
+	return (
+		<div className="bg-background">
+			<div className="container lg:container-lg bg-background text-foreground antialiased box-border">
+				{children}
+			</div>
+		</div>
+	)
 };