Having issues with white space under header

Hello, I’m having an issue with the white space under the header. I’ve scoured the forms and have tried several solutions that have helped others, but I’m at a loss at this point.

My home page is fine, but for instance, if you go to: https://airecomfortsystems.com/contact-us/ you can see the white underneath the header between the picture. Also, if you hit refresh, it removes the white but it brings up the content of the rest of the page below and on some of the pages, makes the content go behind the header.

I have a few css custom codes that are probably the issue.

This is the one I’m using for my header padding:

@media only screen and (min-width:992px){
  
  #masthead.site-header.fixed{
    position: fixed !important;
  }
  .site{
    margin-top: 106px;
  }
}
.page-wrap {
    margin-top: -25px !important;
}
.header-slider {
    margin-bottom: -90px !important;
}

This is the one I’m using to keep the logo and header menu spaced out:

.header-wrap .container{
    width: 100% !important;
  }

This is the one I’m using for the image in the header:

#masthead {
    background-image: url(//airecomfortsystems.com/wp-content/uploads/2019/01/header4.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

And this is the one I’m using for the logo in the header:

.site-logo {
    height: 185px;
    max-height: none;
  max-width: 700px;
}

My front page is fine, but it’s all the other pages that are experiencing the white spacing and the refresh issue.

Any help would be greatly appreciated, thanks for your time in advanced.

Hello, you can try to disable this:

@media only screen and (min-width:992px){
  
  #masthead.site-header.fixed{
    position: fixed !important;
  }
  .site{
    margin-top: 106px;
  }
  
}
.page-wrap {
    margin-top: -25px !important;
}

.header-slider {
    margin-bottom: -90px !important;
}

Kind Regards, Roman.

Thank you so much Roman,

I deactivated the css you suggested and then realized after refreshing my page, I had put it in there in the first place to move the text in the slider down because the header covered up the text before I added the css.

I found and added this code instead from one of the threads and it fixed my problem with the text inside the slider on the front page.

.slide-inner {
    position: absolute;
    top: 75%;
    left: 0;
    right: 0;
    text-align: center;
} 

Thanks again for your help.

Okay, you are welcome!

Please feel free to ask any other questions that you might have in future.

Kind Regards, Roman.