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.