Image loads wonky on homepage banner

Site URL: https://marigold-whale-tsxy.squarespace.com/

Hey!

I have a white image on my homepage banner with text on but it loads wonky in every browser, I've used a few css snippets like a custom h4 font, a custom h1 font etc. but I do not know what is up with the loading of my site. 

Could you please have a look?

Here's the code I've used for the box (on mobile)

   // MAKING THE WHITE BOX OPTIMIZED FOR MOBILE //

@media screen and (max-width: 767px) {
    section[data-section-id="6076d4e5e5f6754874b0562d"] {
        min-height: 86vh !important;
    }
    section[data-section-id="6076d4e5e5f6754874b0562d"] .sqs-block-image .design-layout-poster .image-card {
        width: 100%;
    }
    // MOBILE MENU VERICLE SPACING
    .header-menu-nav-item {
        line-height: 4.2em !important;
    }
}

/* If the screen size is 500px wide or less, hide the element */
@media only screen and (max-width: 500px) {
    div.example {
        display: none;
    }
}
 

Hi. Can you explain clearly your problem? We can help easier