Center the title and push left navigation and right navigation to their extreme left and right

[wary sky]

<nav className="">
  <div className="max-w-6xl mx-auto pt-6">
    <div className="flex justify-between items-center"> 
      <div className="flex items-center"> {/* Left Navigation */}
        <img src="" crossOrigin="anonymous" className="h-8 mr-3" alt="Profile Picture" /> 
        <p className="text-texty font-mono font-bold">{username}</p>
      </div>
      <div className="title flex justify-center flex-grow"> {/* Center Navigation */}
        <h1 className="text-5xl text-center text-texty font-extrabold font-sans">Ttitle</h1>
      </div>
      <div className="flex gap-5 items-center"> {/* Right Navigation */}
        <button className="bg-login-button rounded-xl h-12 w-28 text-white text-lg font-bold hover:border-blue-500 hover:bg-indigo-500 hover:text-white">
          Logout
        </button>
        <button className="bg-red-500 rounded-xl h-12 w-28 text-white text-lg font-bold hover:border-blue-500 hover:bg-indigo-500 hover:text-white">
          Clear
        </button>
      </div>
    </div>
  </div>
</nav>

This results in

what I want is

What i get out of the code