navigation – Logo centred – Laptop view

Dear Support Team,
On the website https://www.schlosswirtschaft-schwaige.de/, the logo is centred in the header and the navigation is to the right and left of it. This works well on a desktop PC, but no longer on a laptop, where part of the navigation hangs in the content area: see: Screenshot laptop: https://www.schlosswirtschaft-schwaige.de/support/laptop-menu.jpg
The script for centring the logo and navigation is as follows:
#header .main_menu {
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: 300px;
}

.av-main-nav>li>a {
padding: 0 40px;
}

.av-main-nav>li>a {
padding-top: 50px !important;
}
}

.html_header_top.html_header_transparency #header {
position: relative;
}

.responsive body.boxed#top, .responsive.html_boxed.html_header_sticky #top #header, .responsive.html_boxed.html_header_transparency #top #header {
max-width: 100%;
}

.responsive.html_mobile_menu_tablet #top #header_main > .container .main_menu .av-main-nav > li > a, .responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container {
height: 90px;
line-height: 90px;
}

#top #header .av-main-nav > li.menu-item {
display: none !important;
}

What do I have to change / correct so that it also works on smaller screens such as a laptop?
Many thanks and best regards, Diana