My navigation bar consists of a first list, an image, and a second list. I am trying to center the image and position the lists around it. To better illustrate my issue, I have created a visual representation on Tailwind Playground since I am implementing this in my project. Thank you in advance for any assistance.
I attempted to use 'justify-center' on the parent element ('nav'), but since the lists are not of equal size, the image will never be perfectly centered. I also tried giving the 'nav' a fixed width and using auto margins to center it, which seems like the most logical solution, but unfortunately, I couldn't get it to work. Another failed attempt involved centering with 'justify-center' and then adding a margin to the right equal to the width of the image's container, which turned out to be a foolish effort as it did not produce the desired result.