Header CSS Formatting Issue

Hello, the password for my site is "gerbercontrols". The side address is gerbercontrols.squarespace.com The issue I am running into is the header is stuck on the left side of the page. I am trying to get the white background of the header to span the entire page, but the logo and nav bar to be limited to 1400px wide and centered on the page. It also needs to be fixed as well. I have entered css code for it to do that, but it pulled it to the left and limited the white background to 1400px wide instead of just the logo and nav bar. Is it possible to do what I am trying to do, and are you able to tell me what the issue with my code is that I am having? I have pasted all of the pertinent coding below that may have an effect on the page. A site that is a good reference to what I am trying to achieve is this one: https://ice-electric.com/

All of the code the is on my site currently is this:

#site {
max-width: 1400x;
margin-right: auto;
margin-left: auto;}

#header {
position: fixed !important;
location: center;
max-width: 1400px !important;
margin-right: auto !important;
margin-left: auto !important;
border-top: 4px solid #003399;
border-bottom: 4px solid #003399;
width: 100%;
z-index: 10000;}

.sqs-block-summary-v2 .img-wrapper, .sqs-block-summary-v2 .sqs-video-wrapper {
border: 1px solid #003399);}

#headerNav nav .subnav, #sidecarNav nav .subnav {
background-color: #afacac;}

hr { padding: 2px 0 2px 0;
color: #003399 !important;
background-color: #003399 !important;}