Next.js中Navbar与Logo无法在同一行对齐的问题求助

我在使用Tailwind CSS开发Next.js 14（App Router）的Navbar组件时，遇到Logo与导航项无法在同一行正确对齐的问题，期望实现Logo居左、导航项居右且间距合理的布局。

当前代码 #

Navbar.tsx #

// Navbar.tsx
import React from "react";
import Link from "next/link";
import Image from "next/image";
import { getServerSession } from "next-auth";
import { authOptions } from "@/app/api/auth/[...nextauth]/route";
import LoginButton from "./NavbarButtons/LoginButton";
import UserNavMenu from "./NavbarButtons/UserNavMenu";

const Navbar = async () => {
    const session = await getServerSession(authOptions);
    
    return (
        <div className="w-full px-5 py-3 bg-white shadow-sm font-work-sans">
            <nav className="flex items-center justify-between max-w-7xl mx-auto">
                <Link href="/" className="flex-shrink-0">
                    <Image src="/logo.png" alt="logo" width={144} height={30} />
                </Link>
                
                <div className="flex items-center gap-5">
                    {session?.user && session.user.id ? (
                        <>
                            <Link href="/startup/create">Create</Link>
                            <UserNavMenu user={{
                                id: session.user.id,
                                name: session.user.name,
                                email: session.user.email,
                                image: session.user.image
                            }} />
                        </>
                    ) : (
                        <LoginButton />
                    )}
                </div>
            </nav>
        </div>
    );
};

export default Navbar;

layout.tsx #

// layout.tsx
import Provider from "./provider";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Provider>{children}</Provider>
      </body>
    </html>
  );
}

预期效果 #

• Logo位于左侧
• 导航项位于右侧
• 二者在同一行保持垂直居中对齐
• 导航栏占满全屏宽度

已尝试方案 #

• 在导航栏容器使用flex与justify-between属性
• 为Logo添加flex-shrink-0属性
• 嵌套多层flex容器
• 调整w-full等宽度属性
• 组合使用不同flex对齐属性

环境 #

• Next.js 14
• Tailwind CSS
• App Router 结构

效果对比 #

当前效果截图：
预期效果截图：

恳请帮助解决该布局问题！

内容的提问来源于stack exchange，提问作者Radical Rosh