How to make a horizontal menu with a logo in the middle?

Question

HTML

Hello everyone, please help me to make a horizontal menu with a logo in the middle.
I did, but when you reduce the screen, then the left and right sides run into each other.
Correctly displayed only on large screens.
and on the left and right, the background is padded with a gradient from the edge to white and transitions to transparency in the middle.
https://jsfiddle.net/xzpnzb3j/5/

Answer 1

Your markup is so funny. Most likely, everything was there for your tasks, but you can simplify it a bit:
1) parent block > container block for flex> child blocks that you will flex
Child blocks are links. Add your logo as a menu link
Like this:
Tyts