Tailwind CSS center horizontally in navbar - html

Question

Using the default tailwindcss navbar in Laravel Breeze, I want to center the application logo, whilst having navigation links on the far left and right of it. There will be three navigation links on one side, and just two on the other, so flex-between won't work properly. Any ideas how to do it? Here is the entire default navbar, and how it currently looks.
<nav x-data="{ open: false }" class="bg-white border-b border-gray-100 py-6">
<!-- Primary Navigation Menu -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<!-- Logo -->
<div class="flex-shrink-0 flex items-center">
<a href="{{ route('index') }}">
<x-application-logo class="block h-10 w-auto fill-current text-gray-600" />
</a>
</div>
<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
<x-nav-link :href="route('index')" :active="request()->routeIs('index')">
{{ __('Home') }}
</x-nav-link>
<x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
{{ __('Occupational Health') }}
</x-nav-link>
<x-nav-link :href="route('bookings')" :active="request()->routeIs('bookings')">
{{ __('Inquiry') }}
</x-nav-link>
</div>
</div>
<!-- Settings Dropdown -->
<div class="hidden sm:flex sm:items-center sm:ml-6">
#guest
#if (Route::has('login'))
#endif
#else
<x-dropdown align="right" width="48">
<x-slot name="trigger">
<button class="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out">
<div>{{ Auth::user()->name }}</div>
<div class="ml-1">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</div>
</button>
</x-slot>
<x-slot name="content">
<!-- Authentication -->
<form method="POST" action="{{ route('logout') }}">
#csrf
<x-dropdown-link :href="route('logout')"
onclick="event.preventDefault();
this.closest('form').submit();">
{{ __('Log Out') }}
</x-dropdown-link>
</form>
</x-slot>
</x-dropdown>
#endguest
</div>
<!-- Hamburger -->
<div class="-mr-2 flex items-center sm:hidden">
<button #click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
#guest
#if (Route::has('login'))
#endif
#else
<!-- Responsive Navigation Menu -->
<div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
<div class="pt-2 pb-3 space-y-1">
<x-responsive-nav-link :href="route('index')" :active="request()->routeIs('index')">
{{ __('Home') }}
</x-responsive-nav-link>
<x-responsive-nav-link :href="route('bookings')" :active="request()->routeIs('bookings')">
{{ __('Bookings') }}
</x-responsive-nav-link>
<x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
{{ __('Dashboard') }}
</x-responsive-nav-link>
</div>
<!-- Responsive Settings Options -->
<div class="pt-4 pb-1 border-t border-gray-200">
<div class="px-4">
<div class="font-medium text-base text-gray-800">{{ Auth::user()->name }}</div>
<div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
</div>
<div class="mt-3 space-y-1">
<!-- Authentication -->
<form method="POST" action="{{ route('logout') }}">
#csrf
<x-responsive-nav-link :href="route('logout')"
onclick="event.preventDefault();
this.closest('form').submit();">
{{ __('Log Out') }}
</x-responsive-nav-link>
</form>
</div>
</div>
#endguest
</div>
</nav>

Answer 1

Thank you to Martin for helping me solve this!
Each section of the navbar was split into containers of width 1/3, and the logo centered in its container, similar to this:
<div class="flex">
<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex sm:w-1/3">
<x-nav-link :href="route('index')" active="request()->routeIs('index')">
{{ __('Home') }}
</x-nav-link>
<x-nav-link class="text-center" :href="route('dashboard')" :active="request()->routeIs('dashboard')">
{{ __('Occupational Health') }}
</x-nav-link>
<x-nav-link :href="route('bookings')" :active="request()->routeIs('bookings')">
{{ __('Inquiry') }}
</x-nav-link>
</div>
</div>
<div class="flex w-1/3 justify-center">
<!-- Logo -->
<div class="flex-shrink-0 flex items-center">
<a href="{{ route('index') }}">
<x-application-logo class="block h-10 w-auto fill-current text-gray-600" />
</a>
</div>
</div>
<div class="hidden sm:flex w-1/3 justify-end">
<x-nav-link :href="route('bookings')" :active="request()->routeIs('bookings')">
{{ __('Inquiry') }}
</x-nav-link>
</div>