reduce space between the menu and header image

Here they are [screenshot] (right of toolbar).

Found using Chrome’s Developer Tool.

Thanks, I am still having trouble locating this in the actual style.css file, any suggestions on where I may be over looking it?

Why do you need to locate the origins of it?

How else would I change the size without editing the style.css?

You ought to add new styles externally, not within the theme’s files. Changes to the theme’s files will compromise the theme and be compromised when the theme updates.

External changes can be made using a Child Theme or through a plugin that provides Custom CSS functionality.

I recommend using the Jetpack plugin and its Custom CSS functionality to hold your CSS modifications.

Ok, once I have jetpack activated what would I need to do to make the changes?

Go to Appearance → Edit CSS in the dashboard, then write your new CSS style(s) based on the information exposed by the browser’s developer tool (screenshot above).

ok, I have everything pulled up and am ready to type in the custom CSS but i am at a loss as to what exactly I type in from the screenshot above. thanks for all the help

#header figure {
 margin: 0;
}

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

that worked thanks so much!

LAST question. I successfully removed the top line from the layout but I cannot get the bottom gray line to disappear any idea on what the css would be called for that?

Try this:

.type-page footer {
    border-top: 0;
}

That worked thank you!