Olá Bruna!
No seu código você aparentemente não há nenhuma tentativa de alinhamento.
/////////////////ALINHAMENTO POR MARGEM///////////////////////////////////
Se quiser alinhar o botão no centro da página no mobile, você terá que primeiro alinhar a divisão em que ele está, a .caixa-main.
Vi que tentou por width: auto. Porém este valor por default (padrão) já é auto.
Acredito que tenha feito isto pois sabidamente pesquisou e chegou a informação que para o alinhamento através das margens funcionar você precisa que seu bloco tenha largura definida. Porém cometeu o erro comum de achar que auto é definido, quando não é.
Além disso você definiu o tamanho das margens. Para o alinhamento através de margens você precisa deixar as margens como auto e definir o tamanho para o width do bloco. Exemplo:
@media screen and (max-width:480px) {
.caixa-main {
width: 70%;
margin-left: auto;
margin-right: auto;
margin: 0 auto; <--------- Essa linha é o resumo das duas superiores
}
}
Porém isso só centraliza a divisão. Para centralizar o botão você pode acrescentar isto ao css dele:
display: block;
margin: 0 auto;
O display block é acrescentado pois por padrão elementos inputs de um form possui display inline, e por isso não aceitam margens e entre outras propriedades.
////////////////////// ALINHAMENTO VIA FLEX BOX ///////////////////////////
Para alinhar via flex você precisará aplicar esta propriedade aos pais do botão. Manterei o alinhamento da .caixa-main por margem e irei aplicar o flex apenas no form.
//SELETOR DE TAG É UMA MÁ PRÁTICA O IDEAL É CRIAR UMA CLASSE
form {
display: flex;
justify-content: center;
}
Isso irá alinhar não só o botão mas todo conteúdo do formulário ao centro da caixa-main.
Espero ter ajudado.
OBSERVAÇÃO: Outra má prática é por propriedades de CSS no seletor fora de ordem alfabética, isso no futuro pode prejudicar achar algumas propriedades.
Recomendo o curso de flex elementos aqui da Alura. Você ficará fera em alinhamento.
