logo centered navigation right and left

Dear Team,
I am currently designing a new hotel page for a client. https://hotel-uhland.de/NEU/
he would like to place the logo in the middle, 3 menu items arranged to the left, 3 to the right of the placed. I have tried this via css, but it does not really work yet:

Here are the remaining difficulties:
1. The menu is not really symmetrical (right and left) from the logo in the middle. In addition, the left menu item on the outside (HOME) should be left-aligned with the content area of ​​the website. The menu item on the right (REERVIEREN) should also be right-aligned with the menu. Here’s a screenshot of how it looks like on a standard laptop: https://www.osmosis.de/support/hotel-uhland_widescreen.png
In red I marked the zones I care about.
Which settings do I have to change or supplement so that the distance between the menu items and the logo is the same and the menu items on the outside match the content width?

2. Even more difficult is the layout, if I look at a screen, which has no broadband format: https://www.osmosis.de/support/hotel-uhland_smallscreen.png HIer jumps me the menu in a second row!
Which settings do I have to make or change so that the menu does not jump to a second line? In addition, should the distance from the menu items to the logo be the same size for this screen type? Could you please tell me or make these settings?

3. In addition, I have a third question: The menu item REERVIEREN (last menu item) should stand out in color from the other menu items and, for example, be displayed permanently in RED. How can I display only a single menu item in RED?

many thanks for your help!