Navigation bar

Hi - I made my logo centered with the nav bar (2 on either side of the logo) with the below code. But it's not letting me click on the two buttons on either side of the logo, only the 2 farthest away from the logo on either side are letting me click. 

@media screen and (max-width: 3000px) { h1 {
  font-size: 14px;
  }
p {
    font-size: 1px
  }
  }

@media only screen and (min-width: 1030px){ 
.header-nav {
 position: absolute;
 margin-top:0!important;
 top: 2.5rem; 
  
  .header-nav {
    position: absolute;
    top: 5px;
    bottom: 0;
    margin-top: 0!important;
    margin-left: -10px!important;
}

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

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

.header-nav-item:nth-of-type(2) {
  
}

.header-title {
 z-index: 99!important;
 } 
}
 

@mbb22 Can you share your site URL?

Thank you so so much!!

One more question - only the top part and the lower part of my logo is clickable. The middle doesn't seem to be. Is there a way to make the whole thing clickable? @Lesum

@mbb22 Hi! Remove the previous code I shared and add this code under Custom CSS

.header-title-logo {
    display: inline-block !important;
}
.header-title {
    flex: 0 0 auto !important;
    display: block;
}
.header-nav * {
    z-index: 98 !important;
    position: relative !important;
}

You're the best, thank you!

@Lesum the logo on my mobile view is now a bit wonky: https://www.susanbecherpr.com/

How can I move it back to the lefthand side? Thanks!

@mbb22 Hi! Sorry I didn't check the mobile site when I was writing the code:

You can add this code:

@media screen and (max-width: 1024px) {
  #header .header-title-nav-wrapper {
    justify-content: flex-start;
    align-content: flex-start;
  }
  #header .header-title-logo {
    padding-left: 0 !important;
  }  
}

No I so appreciate it, thank you!