Just curious, but why are you using absolute positioning on the logo container (which is display:block) and crow-barring the nav container in (which is also display block) on top of it
Would seem simpler to either flex them or apply display:table-cell to them?
The logo needs to be within the grid, while the navigation doesn’t. Unless I misunderstand you (and feel free to get a demo up showcasing me being wrong), then I wouldn’t be able to have the main navigation extend to the edge of the browser window like that. The logo needs to be 1180px auto margined, which I wouldn’t be able to do if i flex or table-cell’d it.
I did position absolute in the early stages of making this; and I haven’t had a chance to clean it up.
Feel free to play with it in dev tools and make the changes. I’d really love to see if there is an alternative to this that would work.
The issue I had was having part of it in the grid but then extending hte right part of it to the browser edge. There’s negative margins but that doesn’t bring content over there; it’s good for background colors, etc, but I was having issues.