Make Navigation Bar color extend full width of screen but not move the text

I am trying to make the colored bar behind my navigation extend the full width of the screen without moving where the text is positioned.

None of the squarespace header layouts allow me to extend the color bar and line up the navigation and logo where they are.

I tried some css posted on another forum post but it then moves my text way over to the left.

.header-nav {
    background-color: #e6e3e3;
    flex: 0 100%;
    width: 100vw;
    display: block;
    position: absolute;
    bottom: -2.2vw;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
          }

This is the last step before finalizing my site and having it replace our current site so any help is much appreciated!

I've attached a picture of our current site and what I'd like it to look like.

Thanks!

Stephanie

Can you share your website URL?

https://cranberry-parrotfish-zhn3.squarespace.com/

Thanks for that, but I'm slightly confused as to what you're wanting help with?