Div higher than expected on mobile devices

The bottom div is higher than I would like on mobile devices tablets phones ECT. it should be just below the maintext div and maintext should be just below the head div all are inside the main div. But the bottom div is about 100px higher into the maintext div on tablets and phones. Why?? Here is my css.

Can you share your full code via codepen so that we can tinker with it?

As @shimphillip suggested, give us a link to your full code. Actually, just edit your original post and delete all that CSS out and put the link to the code instead.

Thank you.

here is the live site with code https://jamatty.000webhostapp.com/

It is preferred for a user to provide a Codepen or JSFiddle which contains all the source code, so we don’t have to try to recreate the code (via copying/pasting) from your live app’s source to “tinker” with the code.

I solved it by putting a bunch of special css formatting for phones and tablets in side of @media only screen and (max-height: 768px), only screen and (max-width:768px) {} tags at the end of my css block.