/* Este aqui não funcinou, pois eu transformei cada numero em um conteiner que deveria ser um layout,
assim, fazendo eles ficarem um abaixo do outro. Algo que não é a proposta. 

.number{
   display: grid;
   grid-template-columns: auto;
   padding: 10px;
   text-align: center;
   font-size: 30px;
}

**/
body{
   display: flex;
   height: 100vh;
   justify-content: center;
   align-items: center;
   background: #dcdcdc;

}
/* defini o tamanho da área da minha calculadora**/
.calculadora{
   display: flex;
    flex-direction: column;
    height: 200px;
    width: 320px;
    padding: 20px;
    background: #cfcfcf;
    gap: 15px;
}

/* Aqui eu dividi os operadores em 1 e 2. Os operadores 1 são os display onde vai entrar o número que for escolhido,
 aqui mexi no posicionamento e coloquei os displays em colunas usando o display:grid.**/
.operadores1{
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
    align-items: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    
}

.operadores2{
display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}