"use client";import Link from 'next/link';import { usePathname } from 'next/navigation';const Navbar = () => { const pathname = usePathname(); return (<nav className='min-h-10 h-12 bg-black px-24'><div className='flex justify-around items-center'><h1 className='font-bold text-white text-2xl'>Profile</h1><ul className='flex justify-center items-center text-gray-400 gap-6'><li><Link className={`${pathname === '/' ? 'active' : ''}`} href={'/'}> Home</Link></li><li><Link className={`${pathname === '/more' ? 'active' : ''}`} href={'/more'}> More</Link></li></ul></div></nav> )}export default Navbar;The navbar items are not aligning along y-axis even though i have used items-center. I am not sure why this is happening can anyone help. I am stuck here.