Logo size and spacing issue with centre logo

Hello Victoria,

The site is thrussells.com

Thank you!

Hello Victoria,

Thank you for your help, it is much needed and appreciated!

What works: When the webpage is at larger desktop resolution and smaller mobile resolution, the logo size and padding looks great.

What doesn’t work:
1. At the medium in-between resolutions for tablets and larger devices, the logo becomes big with not enough padding.
2. The logo also jumps to the left with all the menu items appearing on the right changing its intended behaviour.
3. The logo appears not to be in the center of the page and the padding is larger on the left of the logo, creating more space between the logo and the first three menu items when centralised.

Here is the screenshot showing examples of what I mean https://i.postimg.cc/D0cTk1DY/Logo-Resize-Padding.png

I appreciate any assistance in making the logo scale down gracefully keeping its size and padding proportions, and fixing the logo centralisation and padding issue.

Here is the code I got from another forum post to centralise the logo. The code also includes yours.

Thank you so much!

@media only screen and (min-width: 780px) {
/*In the below code nth-child(x) the value of x should be half the number of total menu items*/
#header .av-main-nav li:nth-child(3) {
/* Adjust the width of the logo */
margin-right:200px;
}

#header .main_menu {
/*background: gold;*/
width: 100%;
left: 50%;
transform: translateX(-50%);
}

.av-main-nav-wrap {
left: 50%;
transform: translateX(-50%);
}

#header .logo {
left:50%;
transform: translateX(-50%);
z-index:999;
}

#header .logo img {
top: 50%;
transform: translateY(-50%);
max-width: 140px;
}
}

/* Header menu items */
#header .avia-menu-text {
font-weight: normal;
}

/* Centre align Copyright socket text */
.sub_menu_socket {
display: none;
}
#socket .copyright {
text-align: center;
width: 100%;
}

/* Make logo appear smaller on mobile and tablet resolutions */
@media only screen and (min-width: 780px) {
#header .logo {
left: 50%;
transform: translateX(-58%);
z-index: 999;
}
}
@media only screen and (max-width: 767px) {
.responsive .logo img {
width: 50%;
}
}

/* Constraining image sizes in lower resolutions */
@media only screen and (max-width: 767px) {
.avia-image { max-width: 50% !important; }
}