Want boxed navigation boxes to be more expanded instead of being centered and not have the space on the sides.

I am currently playing with the css to make the navigation like the mockup after my screenshot but have a hard time actually doing that. I will paste my code below. TIA!

.header-announcement-bar-wrapper {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.header-display-desktop {
    flex-direction: column;
}
.header-title-nav-wrapper {
    flex: 0 0 100% !important;
    margin-right: auto;
    width: 100% !important;
}
nav.header-nav-list {
    display: flex;
    width: 100%;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}
.header-nav-item a {
    line-height: initial;
    padding-top: 10px !important;
    padding-bottom: 10px !Important;
}
.header-nav-item {
    border-left: 1px solid white;
    border-right: 1px solid white;
    margin: 0 !important;
    padding-left: 1vw;
    padding-right: 1vw;
    margin-left: -1px !important;
}
nav.header-nav-list {
    justify-content: center !important;
}

Hi,

I helped some members to achieve this.

If you share link to your site, we can check & adjust code easier