Web page header not resizing to image

Multi tool use
Web page header not resizing to image
I have placed an image into the <header>
section of my web page. The image is sized to be 100% of the width of the browser. Unfortunately the height is bigger than the <header>
section. I have tried in my css to set the header height to auto, but it doesn't work, the text of my next section ends up under the <header>
image. So far the only way I've found to fix it is to set the direct height of the header, but then I would have to change it for each breakpoint and that gets tedious.
<header>
<header>
<header>
Does anyone have any ideas on how I can get the header to fully contain the image without it overflowing on top of the next section?
Works fine here...jsfiddle.net/es7fjvLu/2 Headers have height:auto by default, so if you have trouble setting its height, maybe you have interference from a library or something.
– Mr Lister
Jul 1 at 13:45
I'm sorry but I'm having trouble with adding any code in this comment box... Every time I hit enter for a new line it posts the comment. I'm new to StackOverflow, sorry.
– C. Sage
Jul 1 at 14:02
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Can you post your code or add link to example?
– Steve Mulvihill
Jul 1 at 2:26