Reducing White Space Above Your Header Image Regardless Of The Browser Size

My website is www.rosstheexplorer.com. The following code is in my header.php Copy

The 400px margin is responsible for your header image being pushed so far down the page. Simply remove this to ensure that the header stays at the top of the page.

Alternatively, you can use the shorthand margin of margin: 0 auto 400px; if you would like to keep the margin at the bottom, but remove the marign at the top.

Note that you also have a padding of 54px. If you would like it flush up against the top of the page, you can remove the padding as well, or use padding: 0 108px 54px; to only pad the bottom.

Hope this helps! :)

Solution 2:

There is a margin in your .site-Class. It also seems that theses styles are duplicate in different files of your CSS (style.css and a ?cached? custom-css) .

Change your CSS and it should be as expected:

@media screen and (min-width: 75em) {
    .site {
        max-width: 1153px;
        margin: 0 auto; /* change to this value or remove this line, it's already inherited from style.css:967 */
        padding: 54px 108px;
    }
}

Solution 3:

Thank you for your suggestions.

In Additional CSS I had

@media screen and (min-width: 75em) {
  .site {
    max-width: 1153px;
    margin: 400px auto;
    padding: 54px 108px;
  }
}

I have now changed it to

@media screen and (min-width: 75em) {
  .site {
    max-width: 1153px;
    margin: -50px auto;
    padding: 54px 108px;
  }
}