Border Around Navigation

Hi! 

I used the code below to create borders around my header navigation links. I like it- however, all the spacing on the sides (those 2 empty rectangles) looks funky to me. To solve this, I'm thinking it would be nice to just expand the spacing between the links to fit the width of the page, that way I don't have to have those 2 empty rectangles on either ends. How would I make that happen? 

https://crane-flounder-wkcb.squarespace.com/

password: 12345

/* Fullwidth navigation border*/
.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;
}

Add this CSS under

nav.header-nav-list>div {
    width: calc(~"20% - (6vw + 2px) ") !important;
}
nav.header-nav-list {
    justify-content: space-between !important;
}

@tuanphan thanks for this! however, Im getting this instead when I add the code you gave me: 

On 10/27/2022 at 6:57 AM, kaydotjpg said:

@tuanphan thanks for this! however, Im getting this instead when I add the code you gave me: 

 

 

12345

Incorrect password. Can you check it again?