NAVBAR и LOGO не выравниваются в одном и том же ряду в следующем JS ⇐ Html

[Anonymous]

Я строю компонент Navbar в моем приложении Next.js с Tailwind CSS, но у меня возникают проблемы с тем, что логотип и навигационные элементы будут правильно отображаться в той же строке с надлежащим интервалом (логотип слева, элементы навигации справа). < /p>
текущий код < /h2>
// 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 (


[*]




{session?.user && session.user.id ? (

Create


) : (

)}



);
};

export default Navbar;
< /code>
// layout.tsx
import Provider from "./provider";

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (


{children}


);
}
< /code>
Expected Behavior

• Logo should be on the left side
• Navigation items should be on the right side
• Both should be in the same row with proper alignment
• Full width of the navbar

What I've Tried

• Using flex with justify-between on the navbar
• Adding flex-shrink-0 to the logo
• Nesting multiple flex containers
• Adjusting width properties with w-full
• Using different combinations of flex alignment properties

I'd appreciate any help to fix this layout issue!
Environment

• Next.js 14
• Tailwind CSS
• Using App Router structure

Current Output:


Expected Output:



Подробнее здесь: https://stackoverflow.com/questions/795 ... in-next-js