How to get navigation bar to stay in same place relative to the header

Site URL: https://sheep-tetra-sgjg.squarespace.com/paintings-drawings

Hi, 

I am trying to get the navigation bar to stay in the same position relative to the logo/header. You can see that the "t" in "About" aligns with the "g" in "Drawing" in the header image. However as it is viewed on a larger monitor, the alignment is thrown off and the navigation gets pushed towards the center of the page. Is there a way to get it so the navigation stays aligned with the header no matter what size the screen is?

Thanks!!

Add to Design > Custom CSS

/* remove header limit width */
.header-width-inset .header-inner {
    max-width: 100%;
}