The first thing I would point out is that it doesn’t really make much sense in terms of your HTML structure to have your logo embedded in an unordered list like that. I would instead suggest to just place your logo first on the page, then followed by an unordered list with your navigation links in them.
From there, all you would have to do is just create a standard horizontal menu and center it, but add some additional margin between the 2nd and 3rd menu items to distance them as far apart as the logo is wide. Then set a negative margin on the unordered list itself to bring the menu buttons up beside the logo as you have it pictured.
Also, I would typically let the font size and padding of the styles of the anchor tags within the list dictate the overall menu height, rather than trying to hard code a height in on the UL tag.
Edit: You could also use the “n-th” child selector to target the middle navigation buttons to give them different margins rather than assigning custom classes to those within the HTML.
