Allow image to stretch to edge of browser window

We are playing with a new site layout, using the Pacific template. We are placing a full-width banner image at the top of the page right under the navigation. our "Site Padding" is currently set 0 (zero), but there's still something containing the banner image to a set size limit. We would like our banner image to size itself to go all the way to the left & right browser borders, but not affect our text margins. Any help would be appreciated.

https://lute-harmonica-3bk2.squarespace.com/
justanothertest

@St Lukes 

The issue is the <main> HTML element has a max-width: 1080px style applied to it. The following CSS below will break the banner outside of it's parent container, but still maintain it's place in the flow of the page:
 

CSS

/* Make the banner image the full width of the page */
#block-yui_3_17_2_1_1705198057319_10582 {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Adjust the slide images to be the full width of the page */
#block-yui_3_17_2_1_1705198057319_10582 .sqs-gallery-design-stacked-slide img {
    object-fit: cover;
    width: 100% !important;
}

Sorry @jpeter, you are correct that we are using a gallery for a makeshift rotating banner image. So, when I tried your code, it didn't work as expected. However, when I switched from using a gallery to using an animated GIF, everything worked like we wanted without any modifications. Unfortunately, an animated GIF is a much larger file and it is more difficult to make changes to.

Thanks for your help, but I think we've got it working for us.