Unnecessary space
I'm trying to make a navbar but stuck with this issue and I can't find any solutions about this.
It just added unnecessary space for all elements inside the
I'm using Tailwind
snippet:
It just added unnecessary space for all elements inside the
<nav><nav> that i couldn't figured it out where it was fromI'm using Tailwind
snippet:
<header className="bg-red-600 py-3 flex justify-center">
<nav className="w-full max-w-[768px] flex justify-between px-4 md:px-0 align-middle">
{/* Website Logo */}
<div className="flex justify-center align-middle">
<Link href="/">
<Image
src="/gf-white.png"
alt="GameFiend logo for light theme"
width={100}
height={30}
priority={true}
/>
</Link>
</div>
{/* Routes */}
<div className="hidden md:flex justify-evenly gap-5 text-sm text-white font-bold">
<Link href="/latest">
<p className=''>LATEST</p>
</Link>
</div>
{/* Profile & Hamburger Icon */}
<div className="flex gap-2">
<div className="">
<SignedOut>
<SignInButton
mode='modal'
>
<button className='bg-white text-m font-bold px-3 rounded-full'>Login</button>
</SignInButton>
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</div>
<div className="md:hidden flex">
<AlignJustify color="#ffffff" size={32} />
</div>
</div>
</nav><header className="bg-red-600 py-3 flex justify-center">
<nav className="w-full max-w-[768px] flex justify-between px-4 md:px-0 align-middle">
{/* Website Logo */}
<div className="flex justify-center align-middle">
<Link href="/">
<Image
src="/gf-white.png"
alt="GameFiend logo for light theme"
width={100}
height={30}
priority={true}
/>
</Link>
</div>
{/* Routes */}
<div className="hidden md:flex justify-evenly gap-5 text-sm text-white font-bold">
<Link href="/latest">
<p className=''>LATEST</p>
</Link>
</div>
{/* Profile & Hamburger Icon */}
<div className="flex gap-2">
<div className="">
<SignedOut>
<SignInButton
mode='modal'
>
<button className='bg-white text-m font-bold px-3 rounded-full'>Login</button>
</SignInButton>
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</div>
<div className="md:hidden flex">
<AlignJustify color="#ffffff" size={32} />
</div>
</div>
</nav>
