Keep Navigation Links Centered

Site URL: https://tambourine-oarfish-c28h.squarespace.com/

Using the following code to center my navigation items without stacking, but as the screen size gets smaller the items shift to the left. Any ideas how to keep it centered until the tablet breakpoint?

.header-title-nav-wrapper {
    flex: 1 0 82%;
}
.header-layout-nav-center .header-nav {
    width: 100% !important;
    flex: 0 1 auto;
}
.header-layout-nav-center .header-nav-list {
    justify-content: flex-end;
    flex-wrap: nowrap;
}

https://tambourine-oarfish-c28h.squarespace.com/

password: Bestcannoli2021!

On 9/28/2021 at 10:34 PM, dunnard said:

Site URL: https://tambourine-oarfish-c28h.squarespace.com/

Using the following code to center my navigation items without stacking, but as the screen size gets smaller the items shift to the left. Any ideas how to keep it centered until the tablet breakpoint?

.header-title-nav-wrapper {
    flex: 1 0 82%;
}
.header-layout-nav-center .header-nav {
    width: 100% !important;
    flex: 0 1 auto;
}
.header-layout-nav-center .header-nav-list {
    justify-content: flex-end;
    flex-wrap: nowrap;
}

https://tambourine-oarfish-c28h.squarespace.com/

password: Bestcannoli2021!

Have you try the header layout in Home > Pages > Edit Header yet?

http://recordit.co/KRMD50pX2b

On 10/1/2021 at 8:06 PM, bangank36 said:

Have you try the header layout in Home > Pages > Edit Header yet?

http://recordit.co/KRMD50pX2b

I have, that's the layout I currently have the header set to:

Without the code I included in my original post, the navigation items stack instead of staying on the same line. 

@dunnard Which screen sizes do you have problem? We can use specific CSS for specific screens