Heading Banner scrolls halfway up when scrolling.

I have the setting on fixed but when a user scrolls down my header scrolls up halfway.  I could understand about giving more real estate but I would like to see what it looks like if the header remains.  I also have css so this may be affecting it as well.  Here is the code.  Any help would be appreciated.  If I need to create a new thread I will.  Thanks. Photos of what the whole banner looks like and then what the banner looks like when a user scrolls are also attached.

/*this is for the logo */
.header {
background-image:url(https://static1.squarespace.com/static/65d6a74d8df0af2a991fed5f/t/65dd39063098fa5161156db5/1708996871890/MoeCritiques+SS+2-26-24.png);
background-repeat:no-repeat;
background-size:100%;
background-position: center;
}

/*this is for the header text = white */
body:not(.homepage) {
header#header nav div.header-nav-item>a {
    color: white !important;
}
div.burger-inner>div {
    background-color: white !important;
}
}

/*this is for the title display to none */
.header-title {
display: none;
}
 

Hi tuanphan.  I actually figured it out.  I had css scripting that was doing it.  I did the ole remove all css and see what happens and that was it so I found it and re-scripted it another way.  I should have closed this but thank you so much for responding.  I appreciate it.