Make full width header with split menu

Hi Everyone, 
Will it be possible to have my menu split like below (aligned left and right from the screen full width) but split from the logo.
See below, for now I managed to achieved the split, however the link are not aligned on full witdh.
I tried some code but didn't work yet.
Also I think my links are a bit off horizontally from the logo, can I adjust this?
Thank you so much
 

/* Fullwidth header */
.Header-inner.Header-inner--top {
    max-width: 100%;
}

// SPLIT NAVIGATION

.header-nav {
    position: absolute;
    top: 0px;
    bottom: 0;
    margin-top: 0!important;
    margin-left: 0px!important;
}

.header-nav-item:nth-of-type(2) {
    margin-right: 350px!important;
}

.header-title-logo a {
    z-index: 1000;
    position: relative;
}

.header-display-desktop .header-title {
    flex: 0 0 40% !important;
    z-index: 999999999;
}




My site: https://stingray-flamingo-lt4k.squarespace.com/
Pw: Marius

I see you used new <script> code to achieve this?