How to center an element inside justify-evenly?

Question

I want to have the title and theme to left and right and the menu always center no matter how big the title is.

 <header className="fixed flex w-full items-center justify-evenly">
  <h1 className="flex"> {title} </h1>

  <nav className="flex">
        {links.map((link) => (
          <MenuLink key={link}>{link}</MenuLink >
        ))}
  </nav>

  <div
      {theme === "dark" ? (
        <MdLightMode size={30} />
      ) : (
        <MdDarkMode size={30} />
      )}
  </div>
</header>