diff --git a/src/components/ui/NavbarCentered.tsx b/src/components/ui/NavbarCentered.tsx
index 35e800e..bffb4c2 100644
--- a/src/components/ui/NavbarCentered.tsx
+++ b/src/components/ui/NavbarCentered.tsx
@@ -51,9 +51,9 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
   return (
     <>
       <nav
-        className="fixed top-0 inset-x-0 z-50 h-16 backdrop-blur-lg bg-white/30 dark:bg-gray-800/30"
+        className="fixed top-0 inset-x-0 z-50 w-full h-[var(--navbar-height)] backdrop-blur-lg bg-white/30 dark:bg-gray-800/30"
       >
-        <div className="relative flex items-center justify-between h-full w-content-width mx-auto">
+        <div className="relative flex items-center justify-between h-full w-content-width mx-auto px-6">
           <Link to="/" className="text-xl font-medium text-foreground">{logo}</Link>
 
           <div className="hidden md:flex absolute left-1/2 items-center gap-6 -translate-x-1/2">