for some reason adding <!DOCTYPE html>
breaks justify-content: center
in the body tag. It's like a container without a doctype takes all the space it has, and with it only a part of it.
body{ background-color: rgb(249, 249, 249); font-family: "Segoe UI",Helvetica,Arial,sans-serif; display: flex; flex-direction: column; justify-content: center; align-items: center;}/* containers */.container{ display: flex; flex-direction: column; justify-content: center;}.login-container{ text-align: center; border: solid 1px lightgray; background-color: white; width: 350px; min-height: 395px;}.registration-container{ display: flex; justify-content: center; align-items: center; border: solid 1px lightgray; background-color: white; width: 350px; min-height: 60px; margin: 10px 0; color: rgb(40, 40, 40); font-size: 14px;}/* login-container */.logo-insta{ margin: 45px 0px 30px 0px;}.input-container{ display: flex; flex-direction: column; align-items: center; margin: 0 20px;}.log-insta, .input-box{ display: block; background-color: rgb(249, 249, 249); border: solid 1px lightgray; border-radius: 4px; width: 270px; margin: 3px; padding: 11px 8px; font-size: 12px;}.login-button{ width: 270px; margin: 10px; color: white; font-weight: bold; font-size: 15px; background-color: rgb(0, 145, 255); border: none; border-radius: 4px; padding: 6px;}.or-container{ color: gray; position: relative; margin: 10px 0;}hr{ color: rgb(228, 227, 227); border-top: solid 1px; width: 270px;}.or{ font-size: 14px; font-weight: 600; color: rgb(161, 161, 161); background-color: white; padding: 0 20px; position: absolute; top: -5px; left: 140px;}.login-facebook{ display: flex; justify-content: center; color: rgb(25, 66, 131); font-size: 14px; font-weight: bold; margin-top: 42px; margin-bottom: 23px;}.login-facebook-img{ width: 16px; height: 16px; margin-right: 8px;}.forget-password{ color: rgb(25, 66, 131); font-size: 13px;}/* registration container */.registration-text{ color: rgb(0, 145, 255); font-weight: bold; margin-left: 4px;}/* install app */.download-app-text{ font-size: 14px; text-align: center; margin-top: 12px;}.download-app-container{ display: flex; flex-direction: row; justify-content: center;}.download-app-img{ width: 140px; margin: 20px 4px;}/* Hover */.login-button:hover,.login-facebook:hover,.forget-password:hover,.registration-text:hover,.download-app-img:hover{ cursor: pointer;}/* Active */.login-button:active,.login-facebook:active,.forget-password:active,.registration-text:active,.download-app-img:active{ opacity: 0.7;}
<!DOCTYPE html><html lang="ru"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="/login.css"><title>Instagram</title></head><body><div class="container"><div class="login-container"><img class="logo-insta" src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png"><div class="input-container"><input class="input-box" type="email" placeholder="Телефон, имяпользователяилиэл. адрес"><input class= "input-box" type="password" placeholder="Пароль"></div><button class="login-button">Войти</button><div class="or-container"><hr/><div class="or">ИЛИ</div></div><div class="login-facebook"><img class="login-facebook-img" src="/login-imgs/login-facebook.jpg"><div>Войтичерез Facebook</div></div><div class="forget-password">Забылипароль?</div></div><div class="registration-container"><div>Увасещёнетаккаунта?</div><div class="registration-text">Зарегестрироваться</div></div><div class="download-app-text">Установитеприложение.</div><div class="download-app-container"><img class="download-app-img" src="https://www.instagram.com/static/images/appstore-install-badges/badge_ios_english-en.png/180ae7a0bcf7.png"><img class="download-app-img" src="https://www.instagram.com/static/images/appstore-install-badges/badge_android_english-en.png/e9cd846dc748.png"></div></div></body></html>