CSS Quando muda a resolução da tela os elementos ficam desorganizados.

[CaioNeves]

Então, tô fazendo uma tela de login porém os elementos mudam de posição e ficam bem desorganizados quando dou um inspecionar ou a resolução da tela muda, mas não sei como posso arrumar isso, segue o código a seguir:

 

Barra de navegação

@charset "UTF-8";
/*Customização geral do body*/
body {
  background-color: #121214;
  margin: 0;
}

/*Customização da barra de navegação*/
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #26252A;
  border-left: none;
  border-right: none;
  border-top: none;
  display: flex; /*Estudar*/
  padding: 18px;
  height: 51px;
  /*Personaliza a logo e o nome do site*/
}
nav #link-início {
  color: #e8e1e1;
  margin: auto 20px auto 20px;
  text-decoration: none;
  font-weight: bold;
  font-size: 30px;
}
nav #link-início img {
  margin-left: 100px;
}
nav #link-início #nome-do-site {
  cursor: pointer;
}

/*Personaliza os elementos da barra de navegação*/
ul li {
  /*Personalização de cada tópico*/
  float: left;
  cursor: pointer;
  color: #606063;
  list-style: none;
  margin-left: 50px;
  font-size: 17px;
  /*Personaliza os botões de login ou criar conta.*/
}
ul li:hover {
  border: solid;
  border-color: #f59e1b;
  border-top: none;
  border-right: none;
  border-left: none;
  border-width: 1px;
}
ul li a {
  margin-top: -7px;
  padding: 8px;
  text-align: center;
  border-style: solid;
  border-color: #f59e1b;
  border-width: 1px;
  border-radius: 5px;
  width: 110px;
  height: 15px;
  list-style: none;
  margin-left: 100px;
  position: absolute;
  text-decoration: none;
  color: #e8e1e1;
  font-size: 13px;
  font-weight: bold;
}
ul li a:hover {
  background-color: #f59e1b;
  border: solid;
  border-color: #f59e1b;
  border-top: none;
  border-right: none;
  border-left: none;
  border-width: 1px;
}/*# sourceMappingURL=header.css.map */

Código da tela de login

@charset "UTF-8";
@import url(/css/header/header.css);
body {
  background-color: #121214;
  margin: 0;
}

/*Personalizando a apresentação principal do site*/
main #logo {
  width: 600px;
  margin-top: 60px;
  margin-left: 20px;
  float: left;
}
main h1 {
  color: #e8e1e1;
  float: left;
  position: static;
  margin-top: 150px;
  margin-left: -150px;
  font-size: 50px;
}

/*Personalizando o campo de login*/
#login {
  background-color: #202024;
  background-size: contain;
  border-radius: 10px;
  width: 300px;
  height: 305px;
  margin-left: 900px;
  margin-top: 100px;
  position: absolute;
  border-style: solid;
  border-top: none;
  border-left: none;
  border-color: #f59e1b;
  border-width: 2px;
}
#login #campo-usuario {
  margin-left: 20px;
}
#login #campo-senha {
  margin-left: 20px;
}
#login #campo-senha #link-senha {
  text-decoration: none;
  color: #e8e1e1;
  margin-left: 22px;
  font-size: 13px;
  color: #f59e1b;
}
#login .label {
  margin-left: 22px;
  color: #e8e1e1;
}
#login .entrar {
  text-align: center;
  padding: 2px;
}
#login .entrar h2 {
  color: #e8e1e1;
}
#login #usuario, #login #password {
  background-color: #121214;
  color: #e8e1e1;
  height: 30px;
  width: 215px;
  border-radius: 10px;
  border-top: none;
  border-left: none;
  border-color: #f59e1b;
  margin-left: 20px;
  margin-bottom: 15px;
  margin-top: 5px;
}
#login #password {
  margin-bottom: 5px;
}
#login .botao-entrar {
  color: white;
  background-position: center;
  background-color: #f59e1b;
  width: 225px;
  height: 40px;
  border-radius: 10px;
  margin-top: 10px;
  margin-left: 40px;
  margin-bottom: 5px;
  box-shadow: 0px 1px 15px 0px #f59e1b;
  border-color: #f59e1b;
  font-weight: bold;
  cursor: pointer;
}
#login #criar-conta {
  font-size: 13px;
  margin-left: 65px;
  color: #e8e1e1;
}
#login #criar-conta #link-registro {
  color: #f59e1b;
  text-decoration: none;
}
#login div:focus, #login input:focus, #login select:focus {
  outline: 0;
}/*# sourceMappingURL=inicio.css.map */

 

OBS: Sei que tenho que organizar as propriedades alfabeticamente :)

Tô usando o sass

[DiF]

@CaioNeves Você resolve isso usando o media query.    Basicamente o media Query permite aplicar as mesmas regras  para diferentes resoluções com diferentes propriedades e valores..

 

exemplo:

 

body{
  background-color: red;
}


@media only screen and (max-width: 400px) {
  body {
    background-color: green;
  }
}

 

O código CSS acima, diz que o elemento body vai ter uma cor de fundo vermelha, mas se a resolução de tela for 400px  ou menos, o fundo de tela vai ser verde.   Você pode aplicar isso para a posição dos elementos.

[CaioNeves]

@DiF Show mano! Me falaram que é melhor tratar da responsividade utilizando bootstrap, fazer no CSS puro da muito mais trabalho me disseram, vou ver pra aprender a utilizar o bootstrap. Muito obrigado.