what a mess. while trying to fix this problem and then undoing the tasks because it keeps breaking the navbar, it somehow got put off center. I tried to doing a manual restore to an earlier version to fix it, and it didn’t undo the break? The navbar is still now off centre, even after restoring to a version before I even touched it. This makes zero sense to me.
Luckily, I had mistakenly not used the component on one of my newer pages and had copied pasted the navbar from a different page. So that instance was unaffected from whatever mangled it and I was able to turn that one into a component and replace the mongled one with it, fixing whatever issue that couldn’t be remedied by a restore to earlier version, however, my original issue in the OP remains.
You’ll need to decide what you’re targeting, but remember that the starting breakpoint for desktop is 992px+
Adding a menu item to your nav gives it a minimum functioning width of around 1050px, so it will break in that gap.
But to help you understand the layout model, in general when you have a container, it works best when the left and right margins are Auto and the Max W is set. This also acts as a standard width for the content, I haven’t researched why that is.
You also have Auto margins on your Navigation element which I suspect you don’t want here ( based on position fixed 0% left and right ). It may not harm anything, or it may confuse some browsers.