Extending navigation bar full width of header

I'm trying to extend the navigation bar the full width of the page.  I have a coloured background to the nav bar.   I tried the following code which almost worked.  As you can see from the screenshot, it didnt push all the way left and left a space before the start of the navigation bar.  Any help greatly appreciated 

/* Navigation Width Adjustment */

.header-layout-branding-center-nav-center .header-title-nav-wrapper {

  flex: 2 0 100%;

}

/* Fix width adjustment pushing cart right */

.header-layout-branding-center-nav-center .header-actions--right {

  position: relative;

  right: 4vw;

}

we can help if you share your site url

Hello again bangank36.  You helped on my other problem.  Thanks a lot!  You're a champion.

I'm not sure the code i've written is the right way to get the navigation bar going the full width of the page, but hopefully you can help.

Website is :https://www.blaiserubyloves.co.uk/

Password: buster

.header-layout-branding-center-nav-center .header-title-nav-wrapper {
  flex: 0 100%;
}
.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav {
    width: 100vw;
    display: block;
    position: absolute;
    bottom: -2.6vw;
    left: 50%;
    transform: translateX(-50%);
}

Thanks again Bangank36.  Perfect.