Unwanted top padding inside div ONLY when responsive

Question

Whoever is reading this, please, help me out. i have a simple website, a header with a dropdown menu for when it goes responsive and below there's the main content div, called 'porta-contenido' and with only an image inside. header has a position fixed and z-index:1, so 'porta-contenido' has a relative position and top property so it doesn't get behind the header. Now, all is working correctly, but when i try it on mobile, 'porta-contenido' shows an unwanted top padding (you can see it is that div specifically because of the color yellow). i've no idea why this is happening, if i set an element inside this div it will be fine in desktop mode, but when on mobile, it shows the padding.

You can see the website sample here: http://iniziografico.pe/beta/portafolio.html (you can check the mobile effect if you reduce the size of the browser)

And here's the html and css: jsfiddle(.)net/on3xavwz/

Thanks in advance.

Answer 1

It looks like div#header has position: relative applied under your 480 break-point. Changing this to position: absolute looks like it clears it up.