Web questions

Question

1.How can I transfer one shape to the centre of the page?
2.in my code below I tried it on my computer and there were some bunch of problems
1.background image was gone!
2.the log in box wasn't in the centre!
3.the log box was small I thought that it would be bigger!
4. hr tag that you see is a line in the bottom of the page but in the computer it wasn't in the bottom!
5.I read somewhere that Meta viewport solve this kind of problems about web appearances in different devices but it didn't help!

help me please!

https://code.sololearn.com/WyplLVf3t8jB/?ref=app

Answer 1

1. Centering with flexbox

https://code.sololearn.com/WhQ1t9sYlc41/?ref=app

2. Responsive Design

Use viewport units, media query, etc.

https://code.sololearn.com/W3gS00IGw160/?ref=app
https://code.sololearn.com/W4CYCf5Izf4Q/?ref=app