Position error in my code

Question

Can someone tell me why my code wont work- the circle for my toggle button is at the top but the container is at the bottom ON THE APP but works on pc(i want them both at the bottom)

Hope this is allowed:
https://code.sololearn.com/W2w4chDT1aGl/?ref=app
Pls tell me what i did wrong

Answer 1

/*Hello, ∞Infinítє Cσdєr∞ !*/
@import url(https://fonts.googleapis.com/css?family=Finger+Paint);
h1 {
color: white;
opacity: 0.9;
text-shadow: 5px 2px 4px white;
font:50px "Finger Paint";
text-align: center;
border: 5px solid white;
}
.two {
color: white;
text-shadow: 5px 2px 4px white;
overflow: hidden;
font:50px "Finger Paint";
text-align: center;
color: transparent
}
}
p {
color: white

}
.three {
color: white;
text-shadow: 1px 1px 30px white;
overflow: hidden;
font:50px "Finger Paint";
text-align: center;
}
.container {
background-color:#ccc;
width:100px;
height:50px;
border-radius:50px;
box-shadow: 1px 1px 2px #666;
}

.circle{
background-color:#fff;
width:45px;
height:45px;
border-radius:100%;
position:absolute;
top:10px;
left:10px;
margin-top:495px;
box-shadow:1px 1px 3px #666;
}
/*Here was slightly changed css, try to insert it into your code*/

Answer 2

thanks but still not working

Answer 3

∞Infinítє Cσdєr∞
Change to
.circle
position: relative;
On the distance from the buttons to the text affects .circle margin-top.