Os 2 botões da aula eu tentei diminuir um pouco do tamanho e centraliza-los
.container__botao{
background-color: var(--botao-azul);
border-radius: 5px;
padding: 1em;
color: var(--branco-principal);
display: block;
text-decoration: none;
margin-bottom: 1em;
**margin-left: 5em;
width: 550px;**
usei margin-left pra afastar do lado esquerdo da tela pra deixar no centro da página
(pois width deixava botão pra lado esquerdo.)
tem como fazer isso usando text-align ou align-items?
Olá Ryun, você pode usar o display flex ou então o " margin: 0 auto " que é a forma mais fácil.
exemplo com display flex:
.container__botao{
display: flex; /* inicia o display flex */
align-items: center; /* alinha os itens na vertical */
justify-content: center; /* alinha os itens na horizontal */
background-color: var(--botao-azul);
border-radius: 5px;
padding: 1em;
color: var(--branco-principal);
display: block;
text-decoration: none;
margin-bottom: 1em;
width: 550px;**
}exemplo com " margin: 0 auto; ":
background-color: var(--botao-azul);
border-radius: 5px;
padding: 1em;
color: var(--branco-principal);
display: block;
text-decoration: none;
margin: 0 auto; /* centraliza os itens */
margin-bottom: 1em;
width: 550px;**
acrescentei mais uma coisinha para os botões terem o mesmo tamanho
.container__botao{
background-color: var(--botao-azul);
color: var(--branco-principal);
**border: 2px solid var(--botao-azul);
border-radius: 5px;
padding: 1em;
display: flex; /* inicia o display flex */
align-items: center; /* alinha os itens na vertical */
justify-content: center; /* alinha os itens na horizontal */
width: 500px;
}