While utilizing tailwind css, I am encountering a problem where my justify-between behaves like justify-start. However, when I switch to using justify-end, it aligns everything to the end of the container.
I would appreciate it if someone could point out what I might be overlooking and explain why my Logo and Navigation components are not correctly separating into distinct areas?
Navbar.jsx
import React from "react";
import Logo from "./Logo";
import headerLogo from "../../assets/images/headerImages/phreaquencyLogoDark.png";
const Navbar = () => {
return (
<nav className=" bg-off-white dark:bg-off-black">
<div className="container w-full px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
<div className="flex items-center justify-between">
{/* Logo Div */}
<a
className="text-2xl font-bold text-gray-800 transition-colors duration-200 transform md:hidden dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300"
href="#"
>
Phreaquency
</a>
<div className="hidden md:flex">
<Logo
logoSrc={headerLogo}
logoAltSrc="phreaquency logo"
logoLayout="intrinsic"
logoObjectFit="contain"
logoWidth="150px"
logoHeight="40px"
className="relative z-10 flex items-center w-auto"
/>
</div>
<div className="flex md:hidden">
<button
type="button"
className="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400"
aria-label="toggle menu"
>
<svg viewBox="0 0 24 24" className="w-6 h-6 fill-current">
<path
fillRule="evenodd"
d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
></path>
</svg>
</button>
</div>
{/* Navigation Div */}
<div className="items-center md:flex">
<div className="flex flex-col md:flex-row md:mx-6">
<a
className="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0"
href="#"
>
Home
</a>
<a
className="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0"
href="#"
>
Shop
</a>
<a
className="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0"
href="#"
>
Contact
</a>
<a
className="my-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 md:mx-4 md:my-0"
href="#"
>
About
</a>
</div>
</div>
</div>
</div>
</nav>
);
};
export default Navbar;