Landing Page displays differently in mobile horizontal view

Hi everyone,

So I've created a landing page have two issues. My site is justkodjo.com

Issue 1: The page displays fine in vertical/portrait view; however, when the mobile device is turned in a horizontal view, it displays a different layout than the vertical view. Attached are the screenshots for references

Issue 2: How do I make it so that the landing page doesn't scroll on mobile view and just center the background image. The background image is mostly centered but I'm not sure if its the size that's enabling the scroll. 

I'm taking inspiration from Henry's Landing Page

#1. You mean Header, or main content photo?

If header, change icon color + remove burger?

#2. It looks like you solved this?

On 12/10/2022 at 5:47 PM, tuanphan said:

#1. You mean Header, or main content photo?

If header, change icon color + remove burger?

#2. It looks like you solved this?

#1: I was talking mainly about the header in when the phone is rotated into a horizontal view. I changed the icon colors and removed burger but that doesn't seem to be translated when in horizontal view. 

Below is the code I used to change color and remove burger.

<style>
  @media screen and (max-width:767px) {
.header-burger {
    width: 80px !important;
    flex: 80px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}
    button.header-burger-btn.burger {
    display: none;
}
    .header-title-nav-wrapper {
    flex: 1 0 calc(100% - 100px) !important;
}
    .header-menu-actions {
    margin-top: -80px !Important;
}
    .header-menu-actions * {
    fill: white;
}
  }
</style>

#2: Yes, it is solved.