Custom css code when in landscape mode shifts images to the left.

Site URL: https://zedfactorfellowship.org/

I'm currently having problems with mobile viewing for my website. The issue is viewing the website in landscape shifts the website images leftward and the nav menu also disappear when in landscape mode. I have provided the screenshots of the issues below and all the custom code I have written for the site. 

@media screen and (max-width:767px) {
[data-section-id="5fb32dcd64513a6739b5718e"] {
    min-height: 37vh !important;
  	height: 30vh !important;

}
}

/* CSS FOR TABLET AND MOBILE */
@mobile:  ~"only screen and (max-width: 640px)";
@tablet:  ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
.sqs-block-image {
width: 50%;
margin: 0 auto;
}
/* Insert Code for Mobile Above This Line */
}


html {
scroll-behavior: smooth;
}



//Stylized Folder Dropdown Menu
@linkBGColor: #B10038;
@linkTextColor: #fff;
.header-nav .header-nav-item--folder .header-nav-folder-content {
  padding: 0!important;
  .header-nav-folder-item {
    padding: .5em 1em!important;
  }
  .header-nav-folder-item:hover {
    background: @linkBGColor!important;
    a {
      color: @linkTextColor!important;
    }
  }
}

Try adding to Design > Custom CSS

html, body {
	overflow-x: hidden;
}