Div higher than expected on mobile devices

HTML-CSS
1

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.

2

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

4

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

6

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.