I'm currently working on centering the navigation menu horizontally by aligning it with the width of the header tags using tailwind CSS. However, I've run into an issue where it only centers based on the navigation tags' width.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<header class="flex justify-between items-center h-16 bg-gray-400 px-2">
<div class="flex space-x-4 items-center">
<img src="https://picsum.photos/500/100" alt="" class="h-12 w-auto" />
<span>Company Name</span>
</div>
<nav
class="flex space-x-4 border border-blue-400 flex-grow justify-center"
>
<a href="#">Home</a>
<a href="#">Search</a>
</nav>
<div>
Profile
</div>
</header>
</body>
</html>