What is happening to my button in my code?

Question

When I rotate my screen on my phone, it disappears. Can anyone explain what is happening and give me a solution?
https://code.sololearn.com/W6r5KDEB0OdZ/?ref=app

Answer 1

here is a solution. changes are only on css.
changes are same as the answer of Sandra Meyer.
I hope it helps.
https://code.sololearn.com/WTOVBk8JMyKm/?ref=app

Answer 2

I'm not too much into CSS, but the button does actually not disappear, it's just not longer visible due to that margin-top:-16%; value. Edit reduce it and you'll find your button again 😉

Answer 3

Use display flex on the element with #head, then you can use the margin to align the flex elements horizontally or justify the content to vertically align its elements use align-items.