CSS Centering problem with Logo and Navigation-link

Site URL: https://www.mb-photo.com/

Hello !

I'm new to CSS code, and conding in general, so I want to apologize myself by advanced for my shortcomings.

My problem is that I want my logo and navigation-links to be centered each other regardless of the customer's screen size.
I started coding the CSS part of my website on a 13" Macbook laptop, and now when I look to my website on a 27" screen the navigation-links aren't centered with the logo's website anymore. 

There is an exemple of what I was trying to achieve in order to guide me in the CSS jungle : https://jbivphotography.com/

Anyone have an idea of how I can resolve this problem ?

Cordially, Quentin from France.

ps : I only have the lowest subscription... so I can't use code injection and other stuff.

Here is my custom CSS code : 

// Header double navigation //
.header-layout-branding-center-nav-center
.header-title-nav-wrapper {
  flex-basis: 100% !important; 
  align: center !important; 
  height: 10px !important;
} 
.header-title-logo img {
  margin-bottom:-115px !important;
  transition: 0.4s;
  animation: delay-animation-slow 2s;
  -webkit-animation: delay-animation-slow 2s;
} 
.header-title-logo:hover img {
  margin-bottom:-110px !important; 
  filter: drop-shadow(5px 5px 8px #000000);
  transition: 0.4s;
} 
.header-nav-item {
  top: 10px !important;
  letter-spacing: .15em !important;
  animation: delay-animation-slow 2s;
  -webkit-animation: delay-animation-slow 2s;
}
.header-nav-item:nth-child(1){ margin-left: -2.3vw !important; } 
.header-nav-item:nth-child(4){ margin-left: 22vw !important; }
.header-nav-item--active a { background: none !important; }

// Header underline effect //
.header-nav-item::after {
  content: '';
  background: white;
  height: 1px;
  width: 0;
  display: block;
  margin-top: 8px !important;
  transition: width 0.3s;
  margin: 0 auto;
}
.header-nav-item:hover::after { width: 90%; }
.header-nav-item--active::after {
  content: '';
  background: white;
  height: 1px;
  width: 90%;
  display: block;
}

// Header underline effect //
.header-nav-item::after {
  content: '';
  background: white;
  height: 1px;
  width: 0;
  display: block;
  margin-top: 8px !important;
  transition: width 0.3s;
  margin: 0 auto;
}
.header-nav-item:hover::after { width: 90%; }
.header-nav-item--active::after {
  content: '';
  background: white;
  height: 1px;
  width: 90%;
  display: block;

Hi. It looks like you solved this?

Hi tuanphan! Looks like it, but it's not ... Yes the logo and the navigation-link are horizontally centered. But if we extend the window or on the the contrary we reduce it, the logo still in place while navigation-link goes up or down depending on the screen size. What I would like to get is that the navigation-link stay in place regardless of the screen size, or something close to it will do the job too.

My main concern is that the logo and the navigation-link position remain consistant, with the maximum compatibility, according to the different sizes of screens that our customers use.

Thanks a lot for your response.