Strange scrolling left and right (too much width)

Hey there!

Finally all my desktop, tablet and mobile menu is ready now. But there is something strange going on, when I check my website on iPad and iPhone. The width is silly scrollable. There is something wrong with the width of the website. It must be an CSS issue, but not sure what it is.

My current CSS custom code:

/* Add pseudo fixed background */

body {
    position: relative;

}

body:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://www.prypjatsyndrome.de/v2/wp-content/uploads/2020/02/website-background-noretina-tinyfied.jpg');
    z-index: -1;
    background-repeat: no-repeat;
    background-position: top center;

}

/* swap psuedo fixed background image on 2x devices */

@media only screen and (min--moz-device-pixel-ratio: 2),

only screen and (-o-min-device-pixel-ratio: 2/1),

only screen and (-webkit-min-device-pixel-ratio: 2),

only screen and (min-device-pixel-ratio: 2) {

    body:before {
        background-image: url('https://www.prypjatsyndrome.de/v2/wp-content/uploads/2020/02/website-background-retina-tinyfied.jpg');
        background-size: cover;
    }

}

/* Other CSS */

button.menu-toggle {
    font-size: 20px;
    /* 20px */
}

.envira-gallery-image {border-radius: 5px !important;}

.slideout-navigation.main-navigation {
    display: flex;
    align-items: center;
}

#generate-slideout-menu .inside-navigation {
    padding-top: 0;
}

.main-navigation .main-nav ul li.menu-item-has-children>a {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;   
}

.main-navigation ul ul {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    border-radius: 5px;
}

.main-navigation .main-nav ul li > a {
		border-radius: 5px;
}

.main-navigation .main-nav ul li:hover > a {
		border-radius: 5px;
}

.main-navigation .main-nav ul li:focus > a {
		border-radius: 5px;
}

.main-navigation .main-nav ul li.sfHover > a {
		border-radius: 5px;
}

.envirabox-title {
		text-align: center;
}

.album-art img {
		border-radius: 5px;
}

#sonaar-player {
    left: 50% !important;
    transform: translate3d(-50%, 94px, 0) !important;
}

#sonaar-player.enable {
		max-width: 1100px !important;
		left: 50% !important;
		transform: translate3d(-50%, 0, 0) !important;
	
}

#sonaar-player .playerNowPlaying .album-art img.hover {
    display: none;
}

span.track-number {
		display:none;
}

@media only screen and (min-width: 768px) {
.main-navigation {
    z-index: 100;
    padding: 0;
    clear: both;
    display: block;
}
}

.added_to_cart .wc-forward {
		display: none;
}

a.added_to_cart.wc-forward {
		display: none;
}

@media only screen and (max-width: 768px) {
	a.cart-contents.shopping-cart {
		color: #FFFFFF !important;
			   background: #339900 !important;
	   border-radius: 5px !important;
}
	
	li.wc-menu-item.menu-item-align-right.has-items {
	   
}
	
	.main-navigation {
		background: rgba(255,255,255,0.95);
		padding: 10px;
}
	
		.main-navigation.navigation-stick {
		background: rgba(255,255,255,0.95);
		padding: 10px;		
}
	
}

#mobile-header {
		background: rgba(255,255,255,0.75);
}

@media only screen and (min-width: 769px) {
		a.cart-contents.shopping-cart {
		color:white !important;
}
	
	li.wc-menu-item.menu-item-align-right.has-items {
  	background: #339900;
  	border-radius: 5px;
}
		
	.main-navigation.navigation-stick {
		background: rgba(255,255,255,0.95);
		padding: 10px;		
}
	
}

.main-navigation img, .main-navigation.navigation-stick img {
		height: 30px !important;
		padding-left: 0px !important;
		padding-right: 0px !important;
		padding-top: 0px !important;
		padding-bottom: 0px !important;
}

Any help would be very cool! Thank you, guys!