I'm working on this TailwindCSS project where I have a logo to the left and navigation to the right. Both of them are centered. Because the logo is position:absolute; the navigation is behind the logo. I want them to be side by side. I'm using flex. Is it possible? I'm not sure if grid will be a better solution.
This is the link to 
CodePudding user response：
The simplest solution would be to apply padding-right to the logo.
Change this...
<span >...</span>
...to this.
<span >...</span>
See the snippet.
CodePudding user response：
I think the best option is to put the logo inside the <ul>...</ul> inside an extra list (<li>) item. This way it will allways be next to your homepage link, and won't overlap. You will have to add the width of the image to the <li> element.
An example is seen here: