Header not flush with top, too low on page

Try This:

#main {
    margin: 0;
}

#primary {
    padding-top: 0;
}

#mainnavmenu ul {
    margin-bottom: 0;
}

The CSS code you need is

@media screen and (min-width: 783px) {
   .masthead-fixed .site-main {
   margin-top: 0;
   }
}

I tried finding the CSS code. I couldn’t find it exactly. When I tried to just insert the code you suggested it didn’t work. Any suggestions? Maybe I did something wrong.

In your child theme style.css you have the following code @line 3540 – 3542

.site-main .site-main {
     margin-top: 20px;
}

The code should be:

.masthead-fixed .site-main {
     margin-top: 0;
}

Thanks @zulfikar. I changed the CSS in the child style.css as you suggested. It didn’t work. Still the same spacing above the header.

It seems to have worked as I view the site the gap is not there.

Have you tried clearing your browser cache?

Ahh. I did. It seems to be rendering correctly in Firefox but not Chrome. Is that a Chrome thing or do you think there’s additional code I need to add for that browser? Are you viewing it in Chrome?

Works fine in Chrome, Opera and IE11 too.

OK. Thanks.