diff --git a/apps/web/src/pages/editing-planner/components/PreviewPlayer.tsx b/apps/web/src/pages/editing-planner/components/PreviewPlayer.tsx
index 9daec44bd..8bf4ed57f 100644
--- a/apps/web/src/pages/editing-planner/components/PreviewPlayer.tsx
+++ b/apps/web/src/pages/editing-planner/components/PreviewPlayer.tsx
@@ -87,7 +87,7 @@ const PreviewPlayer: React.FC<PreviewPlayerProps> = ({
                 WebkitTextStroke: "1px rgba(0,0,0,0.6)",
                 top:
                   titleConfig.position === "top"
-                    ? "8px"
+                    ? "6.25%"
                     : titleConfig.position === "center"
                       ? "50%"
                       : "auto",
diff --git a/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx b/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx
index 61ce703f9..35387d1fe 100644
--- a/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx
+++ b/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx
@@ -591,6 +591,8 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
           <div
             style={{
               position: "absolute",
+              width: `${100 - 2 * titleSidePct}%`,
+              maxWidth: `${100 - 2 * titleSidePct}%`,
               ...(customTitleXPct != null && customTitleYPct != null
                 ? {
                     left: `${customTitleXPct}%`,
@@ -599,13 +601,13 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
                     textAlign: "center" as const,
                   }
                 : {
-                    left: `${titleSidePct}%`,
-                    right: `${titleSidePct}%`,
+                    left: "50%",
+                    transform: "translateX(-50%)",
                     textAlign: "center" as const,
                     ...(titleSettings.position === "top"
                       ? { top: `${titleTopPct}%` }
                       : titleSettings.position === "center"
-                        ? { top: "50%", transform: "translateY(-50%)" }
+                        ? { top: "50%", transform: "translate(-50%, -50%)" }
                         : { bottom: `${titleBottomPct}%` }),
                   }),
               pointerEvents: "auto",