Center Logo on Mobile

Evening folks, 

I've just managed to hide the menu burger from my mobile site with some custom code from this forum. I have a personal plan. The logo is unfortuantely now not centered on the page and is leaning quite heavily to the right. 

What code would I need to add to align the logo to the center on mobile? And would I simply add it below the previous custom code?

Thank you in advance.

share your site url pls?

@Mdhanjal_Squarespace www.watertownproductions.com

I am trying to do the same thing, but there is something wrong in my code elsewhere. After adding social media icons to my header, I can't get the logo centered. I am sure there is something I am missing. Every time I get the logo centered, my social icons disappear.

www.flippedpot.com

I already have the following:

.header .header-actions, .header .header-actions-action--social {display: flex}
.header .header-title-nav-wrapper {flex: 47%;}
@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width: 799px) {
  .header-actions--center .header-actions-action--social .icon:not(:first-child) {margin-left: 1vw;}}
@media only screen and (max-width:767px) {.header .header-mobile-layout-logo-center-nav-right .header-display-mobile .header-title {padding-right: 1vw; }}

Thank you!

Try adding this to Design > Custom CSS

@media screen and (max-width:767px) {
.header-mobile-logo {
    padding-right: 0 !important;
}

.header-actions.header-actions--right a {
    width: 25px !Important;
}
}