Problem with body overlapping header

#1

Hello, I’m very new to html/css and I’m stuck on one challenge: i wanted a responsive header, with a desktop version and a mobile version. It’s working fine on the “desktop” one but I’m having trouble with the “mobile” one: the body overlaps the header and I can’t figure out why.

Here’s the link: https://codepen.io/davidebit/pen/YzzwpXE

Any help is appreciated.

#2

Hi,

its this height:
image

If you remove it the header adapts:
image
image

With the height defined, the image and the links “stick out of” the header with the fixed height:
image

1 Like
#4

You could use: min-height: 150px;

#5