Having issues using simple gallery slideshows and with header not being centered

The header on my site seems to be off-center, even though it is on the centered option. I recently added code to change the header for the mobile version of the website and wonder if that may be affecting it? I also have another site in which I try to use the gallery simple slideshow function, but it is coming out off-centered, just wondering if anyone is having the same issue with that one? Here is the code I used below:

.header-title-logo img {
    max-height: 100px !important;
}
.header .header-title-nav-wrapper .header-nav {
    display: block !important;
}
.header .header-burger {
  display: none !important;
}
.header-nav {
    width: 60% !important;
    flex: 1 1 60% !important;
}
.header .header-title-nav-wrapper .header-title {
    flex: 1 0 40% !important;
}

I also have this CSS code in there which could possibly be messing with it?:

 

@logoActionSize: 20%; 

.header-layout-nav-center .header-display-desktop {
  .header-title-nav-wrapper {
    flex: 1 0 calc(~"100% - @{logoActionSize}");
  } 
  .header-actions {
    width: @logoActionSize;
  }
  .header-title {
    width: @logoActionSize;
    flex: 1 1 @logoActionSize;
  }
  .header-nav {
    width: calc(~"100% - @{logoActionSize} * 2");
    flex: 1 1 calc(~"100% - @{logoActionSize} * 2");
  }
}

Hi,

Can you share site url? We can check easier