Bedford Template: How do I make my header navigation have a max width and still stay centered?

I got half the problem down, at first I just wanted to make my header have a max width of 1600px;

I inserted this code into custom CSS

#header {
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 max-width: 1600px;
 background: #fff;
 margin-left: auto;
 margin-right: auto;
}

This is pretty great, It makes my header only stretch out so far with width.

However It presented me with quite a peculiar problem that I do not think happens normally, I think it is an issue from squarespace, it shifts the header to the left most edge, even though margin: auto. Upon playing with it in the inspector I found that changing the left value to anything over zero centered the header. I can attach a video of that if you would like to see, but i'm just wondering if anyone has run into this bug before and knows how to fix it.

Here is the url of my site, zoom out on the page and you will see the header float to the left.

@PMDesigner Remove the code

#header {
   position: fixed;
}

and add this CSS to Home > Design > Custom CSS

#header {
   position: fixed;
   left: 0;
   right: 0;
}

Rockin awesome @tuanphan thanks a ton!