Menu Item not aligning correctly when a container is added above its parent

Trying to build a custom menu, but having a load of css issues when positioning and aligning items. For example in the screen below you can see the first menu item is padded a bit further to the left. Please see image below:  This happened when I created two containers, on for the logo and one for the menu. The logo container will be at the top and the menu container below it. Also if I want to change the appearance for this I have to use calypso and write my own css classes (this advice was from one of the questions I asked). Is there no way this can be simplified to further save time – a way to customise the menu appearance without needing to use calypso? The only way to fix the issue is to remove the logo container above. Please see image below: Is this a possible bug? Observed in chrome Version 87.0.4280.88 (Official Build) (64-bit)  
1 answers

Use browser inspect element tool and check what is taking extra space and also if the HTML structure is correct as you want it to be. 
If you want something to be added above the menu, then do it in a separate new container outside the parent container of menu items. You can set position using design properties available in the Studio Pro without going for the external CSS.