Customized code in my header/navigation and now there's a huge gap in the navigation I can't seem to fix. Plz help!

Site URL: https://healthcontentcollective.com/

Hey y'all! I'm not a pro at coding, but needed to customize this website's heading to have the logo and navigation next to one another (not an option in the style settings for the Pacific theme). Only now there is a giant gap between 2 of the menu items. I am only using 1 navigation/menu.

Below is all of the CSS lines I have. I've been messing around with each of the lines to see if I can fix it by trial and error, but have had no luck. Any insight or possible solutions are greatly appreciated! Thanks!

 #header #logoWrapper,
 #header #siteTitleWrapper {
     position: relative;
     left: 15%;
   right: 5%;
   -webkit-transform: translate(-50%,0);
     -moz-transform: translate(-50%,0);
   -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
     transform: translate(-50%,0);
     text-align: right !important;
 }
 
#header #mainNavWrapper .index {
     margin: 0 0 0 0px !important;
     text-align: left !important;
 }

#header { position: fixed !important; }
     #header {background-color: #ffffff !important}
         header #logoWrapper {
       position: relative;
       left: 50%;
       padding-top: 0;
       padding-bottom: 0px;
     }
     header #mainNavWrapper {
       position: relative;
       padding-top: 0px;
       padding-bottom: 0px;
       text-align: center;
       vertical-align: middle;
       padding-left: 310px;
         padding-right: 20px
     }
     .folder {
       margin-right: 0 !important;
     }
     .collection {
       margin-left: 25 !important;
     }
@font-face {
  font-family: 'aquawax';
  src: url(https://static1.squarespace.com/static/5cb63e9e01232c410328f7f1/t/5ccc82b43786be0001b9282f/1556906676894/aquawax.woff2/aquawax-Regular.woff2) format('woff2'), url(https://static1.squarespace.com/static/5cb63e9e01232c410328f7f1/t/5ccc82ae4e17b63c9fb58d0f/1556906671146/aquawax.woffRegular.woff)
      format('woff');
}
h1{
  font-family: 'aquawax' !important
}
h2{
  font-family: 'aquawax' !important
}
h3{
  font-family: 'aquawax' !important
}
#intro {
    background-color: #5aa1ac;
}

What is your desired end result.

There's a lot of issues with the header right now.

Does it need to be fixed? If so, does the theme have an option for that part?

Right now, with css making it fixed, its cutting off the top of the page.