Merge pull request #280 from VamikaSharma19/navbar-alignment-fix

Navbar Desktop Alignment Fixed

Author: CHHemant

client/src/components/Header.jsx

@@ -89,9 +89,9 @@ export default function Header() {
         bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-700`}
       >
         <div className="w-full px-4 py-2">
-          <div className="w-full flex items-center justify-around">
+          <div className="max-w-screen-xl mx-0 flex items-center justify-between">
             {/* Logo */}
-            <Link to="/" className="flex items-center gap-3 ">
+            <Link to="/" className="flex items-center gap-3 pl-2">
               <img
                 src={navlogo}
                 alt="Logo"
@@ -108,13 +108,13 @@ export default function Header() {
             </Link>
 
             {/* Desktop Nav */}
-            <div className="hidden lg:flex items-center gap-2 w-400">
+            <div className="hidden lg:flex items-center gap-2 ml-20">
               {navItems.map(({ to, label, icon }) => (
                 <NavLink
                   key={to}
                   to={to}
                   className={({ isActive }) =>
-                    `flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-medium rounded-full transition-all duration-300 ${
+                    `flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-medium rounded-full transition-all duration-300 whitespace-nowrap ${
                       isActive
                         ? "bg-gradient-to-r from-purple-600 to-pink-500 text-white shadow"
                         : "text-gray-700 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-gray-800 hover:text-purple-600 dark:hover:text-purple-400"
@@ -128,7 +128,7 @@ export default function Header() {
             </div>
 
             {/* Theme Toggle */}
-            <div className="hidden lg:flex items-center">
+            <div className="hidden lg:flex items-center ml-2 mr-4">
               <ThemeToggle />
             </div>
 
@@ -154,13 +154,13 @@ export default function Header() {
                 <>
                   <Link
                     to="/signin"
-                    className="border border-purple-600 text-purple-600 hover:bg-purple-600 hover:text-white px-4 py-1.5 text-sm font-medium rounded-full transition"
+                    className="border border-purple-600 text-purple-600 hover:bg-purple-600 hover:text-white px-4 py-1.5 text-sm font-medium rounded-full transition whitespace-nowrap"
                   >
                     Sign In
                   </Link>
                   <Link
                     to="/registration"
-                    className="bg-gradient-to-r from-pink-500 to-purple-600 text-white px-5 py-1.5 text-sm font-semibold rounded-full shadow hover:scale-105 transition-transform"
+                    className="bg-gradient-to-r from-pink-500 to-purple-600 text-white px-5 py-1.5 ml-2 text-sm font-semibold rounded-full shadow hover:scale-105 transition-transform whitespace-nowrap"
                   >
                     Get Started
                   </Link>