diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 824ef12..31f94af 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -287,7 +287,8 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
       if (isMobile) {
         // Debounce the dot update to prevent flickering during scroll
         const timer = setTimeout(() => {
-          const cardWidth = containerWidth - 24; // Account for container margins (12px each side)
+          // Card width should match CSS: calc(100vw - 1.5rem) = window width - 24px
+          const cardWidth = window.innerWidth - 24;
           const scrollProgress = scrollLeft / cardWidth;
           const newIndex = Math.round(scrollProgress);
           const clampedIndex = Math.min(Math.max(newIndex, 0), 9); // Ensure 0-9 range
@@ -324,8 +325,8 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
       // Navigate to next card - snap to left edge of screen
       const nextIndex = currentIndex + 1;
       if (scrollRef.current) {
-        const containerWidth = scrollRef.current.clientWidth;
-        const cardWidth = containerWidth - 24; // Account for container margins
+        // Card width should match CSS: calc(100vw - 1.5rem) = window width - 24px
+        const cardWidth = window.innerWidth - 24;
         // Scroll so only one full card is visible
         scrollRef.current.scrollTo({
           left: nextIndex * cardWidth,
@@ -339,8 +340,8 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
       // Navigate to previous card - snap to left edge of screen
       const prevIndex = currentIndex - 1;
       if (scrollRef.current) {
-        const containerWidth = scrollRef.current.clientWidth;
-        const cardWidth = containerWidth - 24; // Account for container margins
+        // Card width should match CSS: calc(100vw - 1.5rem) = window width - 24px
+        const cardWidth = window.innerWidth - 24;
         // Scroll so only one full card is visible
         scrollRef.current.scrollTo({
           left: prevIndex * cardWidth,
@@ -438,8 +439,8 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
               key={`dot-${category.title}-${index}`}
               onClick={() => {
                 if (scrollRef.current) {
-                  const containerWidth = scrollRef.current.clientWidth;
-                  const cardWidth = containerWidth - 24; // Account for margins
+                  // Card width should match CSS: calc(100vw - 1.5rem) = window width - 24px
+                  const cardWidth = window.innerWidth - 24;
                   scrollRef.current.scrollTo({
                     left: index * cardWidth,
                     behavior: 'smooth'