How to make the Header Responsive

I’m not quite sure how to make the header responsive on mobile screens:

I would recommend using flexbox,

Before that, you have to remove the margin and float you have set to all the div’s inside the .container div, and also remove the margin-top that you have set to h1 element.
And apply the flexbox properties to the .container class

height: auto; on header would do the trick …