When I resize my browser my content falls outside of my header how can I stop this?

Question

I have my h1 inside my header and I would like to know how to get my header to respond and resize when I resize my browser so the content does not spill over the header. I am completely okay with redoing my code if it solves my problem.

 #header { max-height:110px; background-color: darkorange; border: 1px solid burlywood; border-bottom: 1px solid black; } 

 <h1> Guide to Painting:A guide to getting your painting projects done efficiently and quickly!</h1> 

Answer 1

Depending on what you mean by "falls outside the browser" the solution might be to swap max-height for min-height.

 #header { min-height: 110px; background-color: darkorange; border: 1px solid burlywood; border-bottom: 1px solid black; } 

 <div id="header"> <h1> This is a long text might overflows to the right if the window is narrow </h1> </div> 

https://jsfiddle.net/8jnofysv/

Unfortunately your problem statement is vague and could mean a number of things, my specific solution would solve only one of those