diff --git a/app/(pages)/explore/hero-banner.tsx b/app/(pages)/explore/hero-banner.tsx
index 860cc29..e049df4 100644
--- a/app/(pages)/explore/hero-banner.tsx
+++ b/app/(pages)/explore/hero-banner.tsx
@@ -45,12 +45,12 @@ export function HeroBanner({
 
   return (
     <motion.div
-      className="relative -mx-4 -mt-6 mb-4 overflow-hidden sm:-mx-6"
+      className="relative -mt-6 mb-4 ml-[calc(-50vw+50%)] mr-[calc(-50vw+50%)] overflow-hidden"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 0.6 }}
     >
-      <div className="relative aspect-[21/9] min-h-[280px] max-h-[420px]">
+      <div className="relative w-full min-h-[280px] max-h-[420px] aspect-[21/9]">
         {backdropPath ? (
           <Image
             src={backdropPath}
diff --git a/app/(pages)/layout.tsx b/app/(pages)/layout.tsx
index 2e976f1..c6f4fa0 100644
--- a/app/(pages)/layout.tsx
+++ b/app/(pages)/layout.tsx
@@ -14,7 +14,7 @@ export default function PagesLayout({
 }) {
   return (
     <KeyboardProvider>
-      <div className="min-h-screen pb-14 sm:pb-0">
+      <div className="min-h-screen overflow-x-hidden pb-14 sm:pb-0">
         <NavBar />
         {/* Ambient glow */}
         <div className="pointer-events-none fixed left-1/2 top-1/4 -translate-x-1/2 -translate-y-1/2 h-[600px] w-[800px] rounded-full bg-primary/3 blur-[200px]" />