Twenty Twelve white space between nav bar and header

Sorry, header is the banner or the logo?
In the meantime, open your webpage in Google Chrome.

I’ve added the logo in the custom css using

/* Add Logo to top left */
.main-navigation {
padding-top: 80px;
background: url(https://www.t8ts.co.uk/wpt8ts/wp-content/uploads/T8-logo.png) left -1px no-repeat;
}

and the pictures are chosen as random in the header settings.
It’s the space between the nav menu and pictures i’d like to remove so that they touch.

going to install chrome now.

Thanks

In chrome, right click on the space between the menu and the picture.
Select ‘Inspect element’.

You should get a new toolbar with the highlighted HTML of <header id="masthead" .... > [screenshot].

Click on the little arrow to the left of <header id="masthead> to expand the HTML within it [screenshot].

Then hover your mouse over the stuff inside. Nothing appears to be responsible for the space. Click on the little arrow to the left of <a href="https://www.t8ts.co.uk/wpt8ts/"> to expand that.

Now hover your mouse over the <img> tag inside of it [screenshot].

As you can see, there is an orange section above the image.
Orange represents margin and green represents padding.

Click on the <img> element and look to the right of the toolbar, look at the CSS applicable to it. Scroll down until you find it [screenshot].

That’s what you need to override.

Using the information provided by the toolbar that you were just looking at, you need to create a new style that will override that.

So, try adding this to your Custom CSS Manager section of the dashboard;

.header-image {
 margin-top: 0;
}

https://www.w3schools.com/css/css_margin.asp

Fantastic. That is better. Thnks very much for your prompt help.

??

Also thanks for the info on the Inspect Element feature in Google Chrome. I didn’t know about that.
Thanks.