Need CSS Help With Logo

Try this
<img width="700" height="301" src="http://www.henricomg.org/wp-content/uploads/2019/09/hmga-butterfly-logo-1024-1.jpg" class="header_logo header-logo" alt="" style="height: 143px !important;">

Hope this helps!

this is a wordpress site cms. So where would I put this?

If you don't want to edit the theme, you can add custom CSS that will survive theme updates.

In recent versions of WordPress, you can do this by going to Appearance > Customize > Additional CSS and adding your CSS. This CSS worked for me in Firefox:

@media screen and (min-width: 850px) {
  .header-main {
     height: 297px;
  }
}

Select allOpen in new window

There are some difference issues with the header on smaller screen sizes, if the responsiveness tools in Firefox are behaving correctly.

There are a number of things that are causing this.
The logo has this style

#logo {
	margin-bottom: -157px;
}

Select allOpen in new window

So a quick fix would be to just change the margin to this

#logo {
	margin-bottom: -161px;
}

Select allOpen in new window

The reason for the negative margin is because of these two styles

div#masthead {
	margin-top: -160px;
}
.header-main {
	height: 301px;
}

Select allOpen in new window

So another option would be to apply these fixes

div#masthead {
  margin-top: initial;
}
.header-main {
  height: auto;
}
#logo {
  margin-bottom: initial;
}

Select allOpen in new window

Both of these options would need to go in your custom CSS after any of the styling of elements they are targeting.

Which one you use will have to be a case of trial and error. The first should fix the problem with minimal impact. Personally I don't like code that does not make sense and moving things around with negative margins is usually a sign of bad design - I would probably go to the cause and fix that - but that might result in side-effects - so I leave it to you to decide which is best.

Caveat to the first option above - changing the logo height won't fix the problem as the the height of the image is not sufficient.
So you would need to do this

div#masthead {
   height: 300px;
}
#logo {
	margin-bottom: -161px;
}

Select allOpen in new window

As I said this is the quick and dirty. My preference is the second option subject to checking for side effects

Thanks to everyone who responded.  I took the answers in order and the answer from Robert Granlund solved the problem.

You might find that without the media query, your chosen solution breaks the header on mobile sized devices.

Hi Terry, I don't have an ipad or tablet but I did check it on my phone.  Did you see it break on a tablet?

I was using the responsiveness tools in Firefox, which aren't always perfect, but I did see it break using those. I just tested it using my Samsung S7, and I got a similar result.

When I say "break", the image reduced in size where I felt that it shouldn't have. Perhaps compare mobile size with and without the new CSS?

I can replicate the "break" with Firebox RDM.
I just tried with the fixes I proposed above which seem to fix the problem

div#masthead {
  margin-top: initial;
}
.header-main {
  height: auto;
}
#logo {
  margin-bottom: initial;
}

Select allOpen in new window