Media has negative margin on mobile?

[AmarisCoven]

Hello,

I’m trying to get the image banner to not “tuck” under the announcement bar area on mobile. The image seems cropped and the menu logo appears over the faces of the subjects. I have a sticky on scroll up transparent menu and transparent announcement bar revealing the background page color. I was hoping the community could tell me where I went wrong here.

The Code I have in my base.css is as follows:

.banner__content {
align-items: flex-end !important;
}
main#MainContent {

margin-top: 100px;

}
@media (max-width: 767px){

.header-wrapper.color-background-1.gradient {

background: transparent !important;

position: absolute;

width: 100%;

}
.header-wrapper.color-background-1.gradient {
position: relative;
left: 0;
width: 100%;
background: transparent;
}}

The code entered into the custom CSS of the announcement bar:

.utility-bar.color-background-2.gradient {
  background: transparent !important;
}

And the code in my theme.liquid:

{% if template == 'index' %}

{% endif %}

[AmarisCoven]

[SEE UPDATE AT BOTTOM]

Ok, so using this amazing community’s many problems and solutions, I’ve found a solution.

I’ve added the following code to the head of my theme.liquid inside of the existing if clause “{% if template == ‘index’ %}” making it only apply to the homepage (which was the goal)

@media only screen and (max-width: 749px) {
  .banner__content{
    max-width: unset !important;
    margin-top: 250px !important;
}}

I’m not sure if this is because of competing code, but the bigger the top margin, the bigger the image. So far, I have no issues.

Here’s the result from my mobile:

UPDATE:

This code being in the header section affected every image banner on the homepage. I have since pasted the same exact code into the custom css field for this specific image banner using the theme editor and it worked like a charm. no other images are affected.