How to move navigation and logo in header to centre after using other css??

Site URL: https://www.thefairystale.co.uk

I have added some CSS to spread out the navigation menu in the header, but because there is a cart icon on the right of the header and because I have used some CSS, it has pushed the navigation and logo left. Is there a way to centralise the nav and logo in the header at all? 

Why is it if you have other icons in the header, it pushes everything out of line??

Thank you!

At the moment, the cart is set to take up to 25% of the space (from Squarespace's default code) and the navigation (and logo) is set to 90% (from the code you added). 

Normally there is also a margin:auto setting that adds space on the left hand side to balance out the space taken up by the cart, but because the navigation is set to be so wide, it's taking up all of that margin, and that's why it's off-centre.

I would suggest removing this code:

.header-nav {
    width: 90% !important;
    flex: 1 1 90% !important
}

.header-title-nav-wrapper {
    flex: 1 0 90% !important
}

And adding this instead:

/* Set cart to take up 5% of the header width */
.header-layout-branding-center-nav-center .header-actions--right {
    flex: 0 0 5%;
}

/* Allow the navigation to stretch and add 5% space on the left to match the cart spacing */
.header-layout-branding-center-nav-center .header-title-nav-wrapper {
flex-grow: 1;
margin-left: 5%;
}

You'll see I've not specified a width of 90% but I don't need to because of MATHS 😂 Setting 5% on the left and right, and allowing the navigation to fill the remaining space (with flex-grow: 1) automatically gives us 90%. 

Let me know if you have any issues!