Full width image that doesn't impact other content block

Site URL: https://rose-kazoo-fasw.squarespace.com/config/design/styles

Hello,

I want to make the blue banner in the attached image, full width and to sit directly under the black header bar. However, I do not want the code to make the entire page content and blocks to be full width.

I want every page to have a banner like this, so perhaps there is a code that can impact every page?

TIA!

Hi. What is password?

@tuanphan, apologies for the delay - password: Spinach2

On 1/15/2021 at 12:42 AM, DarrenLyons said:

@tuanphan, apologies for the delay - password: Spinach2

Incorrect password

@tuanphan I just checked, that is the correct password. The 'S' is capitalized. 

Hey @tuanphan, I am hoping you might still be able to help with this problem? Thanks in advance.

On 1/29/2021 at 12:57 PM, DarrenLyons said:

Hey @tuanphan, I am hoping you might still be able to help with this problem? Thanks in advance.

Try adding to Design > Custom CSS then save & reload your site

body#collection-5fbeb44aeaf37e3b647b40dd {
.Main-content {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}
.columns-12>.row>.span-12>*:not(:first-child) {
    padding-left: 100px;
    padding-right: 100px;
}
}

Amazing! Thank you