Moving my header banner color towards the left

Hi guys! I need help with my website, so for all the website themes the banner is going across the entire website but is there a way I can move the banner to just the top left?

Here is my website:

https://31s9t78lrjydybk3-79949955347.shopifypreview.com

Heres How I want The Banner to Look Like:

I want the banner color to just go over the logo and thats it.

Any help would be greatly appreciated thanks!!

Roughly you’d remove/override the existing background colors; you’d also need to adjust any colors that were dependent on a contrasting background.

Then add custom css adding a psuedo element with the background color making a square of color then rotate it to get the slope then move it left/right up/down to get the alignment right.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

Example css:

.header-wrapper.color-accent-1.gradient {
    background-color: initial;
}

.header-wrapper:before {
 content:" ";

 position: absolute;
 z-index: 0;
 top: -150px;
 left: -150px;
 transform: rotate(45deg);

 display: block;
 width: 300px;
 height: 300px;

 background-repeat: no-repeat;
 background-color: red;
}

.header__heading-link {
 left: -110px;
 position: relative;
}

If you need this customization fleshed out contact me for services.
Please always provide context, examples: store url, theme name, post url(s) , or any further detail.
Contact Info in signature.

Thank you so much for the quick reply!! It added the sideways square but its red and overlapping the logo, can you please help me with this?