Por que quando eu trabalho com a pagina browser não maximizada, minha pagina de produto desconfigura (tabela de produtos e preços). E como posso resolver isso? | HTML5 e CSS3 parte 4: avançando no CSS

Boa tarde, Quando eu trabalho com a página maximizada a minha pagina de produto ela fica perfeita. Porém quando eu trabalho com ela não maximizada a mesma desconfigura. Por que isso acontece ? E como ajustar isso ? Segue o código da pagina e o meu css

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">

        <title> Produtos - Barbearia Alura </title>
        <link rel="stylesheet" type="text/css" href="reset.css">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">

        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <header>
            <div class="caixa">
                <h1><img src="logo.png"alt="Logo Barbearia Alura"></h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <main>
            <ul class="produtos">
                <li>
                    <h2>Cabelo</h2>
                    <img src="cabelo.jpg">
                    <p class="produto-descricao">Na tesoura ou máquina, como o cliente preferir</p>
                    <p class="produto-preco">R$ 25,00</p>
                </li>

                <li>
                    <h2>Barba</h2>
                    <img src="barba.jpg">
                    <p class="produto-descricao">Corte e desenho profissional de barba</p>
                    <p class="produto-preco"> R$ 18,00</p>
                </li>

                <li>
                    <h2>Cabelo + Barba</h2>
                    <img src="cabelo+barba.jpg">
                    <p class="produto-descricao">Pacote completo de cabelo e barba</p>
                    <p class="produto-preco">R$ 35,00</p>
                </li>

            </ul>
        </main>
        <footer>
            <img src="logo-branco.png"alt="Logo Barbearia Alura">
            <p class="copyright">&copy; Copyright Barbearia Alura – 2019. </p>
        </footer>
    </body>
</html>

body {
    font-family: 'Montserrat', sans-serif;
}

header {
    background: #BBBBBB ;
    padding: 20px 0;
}

.caixa {
    position: relative;
    width: 90%;
    margin: 0 auto;
}

nav {
    position: absolute;
    top: 110px;
    right: 0;
}

nav li {
    display: inline-block;
    margin : 0 0 0 15px;
    //margin-left: 15px;
}

nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

nav a:hover {
    color: #C78C19;
    text-decoration: underline;
}
/*pagina produto*/
.produtos {
    width: 940px;
    margin: 0 auto;
    padding: 50px 0;
}

.produtos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 1.5% 1.5%;
    padding:30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 10px;
}

.produtos li:hover {
    border-color: #C78C19;
}

.produtos li:active {
    border-color: #088C19;
}

.produtos li:hover h2{
    font-size: 34px;
}

.produtos h2 {
    font-size: 30px;
    font-weight: bold;
}

.produto-descricao{
    font-size: 18px;
}

.produto-preco{
    font-weight: bold;
    font-size: 22px;
    margin-top: 10px;
}

footer {
    text-align: center;
    background: url(bg.jpg);
    padding: 40px 0 ;
}
.copyright{
    color: #FFFFFF;
    font-size: 13px;
    margin: 20px 0 0;

}

Oi! Também estou no processo de aprendizagem, então não tome como certo o que eu falar.

Dito isso, vamos tentar responder seu questionamento e achar uma das possíveis soluções.

Quando você utiliza isto:

    <meta name="viewport" content="width=device-width">

você está dizendo que o conteúdo da sua página terá como base o tamanho do dispositivo. Em outras palavras, caso o tamanho dispositivo seja diferente daquele definido como padrão no seu código (no nosso caso, 940px), todo o conteúdo será adaptado para caber ali. E isso pode requer que você precise subscrever algumas partes do código para que a visualização do conteúdo não fique distorcida/ilegível.

Então, as mudanças que eu sugiro são as seguinte:

/*Não mude diretamente a sua classe "caixa" de 940px para 90%.*/

.caixa {
    position: relative;
    width: 940px;
    margin: 0 auto;
}

/* Ao invés disso, utilize uma @media para ajustar o conteúdo.

Comece adaptando o tamanho daquilo que ultrapassa do tamanho do dispositivo: a caixa e os produtos.*/

@media screen and (max-width: 939px) {
    .caixa, .produtos {
        width: auto;
    }

    /*Deixe a logo e o menu de navegação conforme o professor explicou: logo alinhada 
    ao centro e menu abaixo dela (considere mudar o tamanho da fonte ou o espaçamento 
    dentro do nav li).*/

    h1 {    
        text-align: center;
        padding: 1.5em 0;
    }
    nav {
        position: static;
    }

    /*Por último, mude os itens da lista de produtos: eles precisam mudar para uma disposição
     em bloco, ter uma largura mínima (usei o tamanho da imagem - 250px - somado com o 
    espaçamento interno do item duas vezes- 20px -, o que dá 290px) e uma margem para
     não ficarem grudados um no outro.*/

    .produtos li {
        min-width: 290px;
        display: block;
        margin: 1em auto;
    }
}

OBS.: No curso, o professor usou como referência 480px. Isso não funcionou pra mim quando simulei uma tela rotacionada em 90° (talvez eu tenha feito algo errado xD).

Chegou a hora de transformar