Centralizando alguns itens

Hey guys.

Como todo bom iniciante estou passando um trabalhinho aqui e fiz vários testes e não estou contrando meu erro.

A partir da linha de produtos estou tendo algumas dificuldades, como por exemplo, indiquei no CSS que uma div especifica seria envolvida por uma borda e parece que algo no HTML está errado, porque envolve apenas as linhas de texto e não das imagens.

HTML

<!-- Produtos -->

<div class="itens"> 
    <div class="Briefing">
        <h3> Produtos</h3>
             <p>Que tal manter o teu penteado finalizado por ainda mais tempo ou ainda ter sempre por perto aquele pós barba para acalmar a tua pele? </p>
             <br> Venha conhecer a linha de produtos Barber House.
            </br>
            </div>

            <ul class="produto">
                <li class="produtos">
                    <figure class="descricao">
                        <img class="pomada1" src="img/6-Produto1.png" alt="pomada1" srcset="" onclick="pomada1()">
                        <figcaption>
                                <h4>Pomada Fizadora</h4>
                                <br>
                                    <p> Com a Pomada Fixadora Barber House para modelagem, tu vai promover uma fixação forte permitindo a criação de formas e modelagens com alta durabilidade. Ideal para penteados com formatos marcantes e estruturados.
                                </p>
                                </br>
                            </figcaption>
                        </figure>
                </li>


                <li class="produtos">
                    <figure class="descricao">
                        <img class="balm" src="img/6-Produto2.png" alt="balm" srcset="" onclick="balm()">
                                <figcaption>                        
                                    <h4>Balm</h4>
                                    <br>
                                        <p>A fragrância amadeirada com notas frescas de cedro do deo parfum que você já conhece na versão balm pós barba. Acalma a pele após o barbear e deixa uma fragrância marcante.</p>
                                    </br>
                    </figcaption>
                    </figure>
                </li>


                <li class="produtos">
                    <figure class="descricao">
                        <img class="pomada" src="img/6-Produto3.png" alt="pomada" srcset="" onclick="pomada()">
                            <figcaption>
                                <h4>Pomada Brilho</h4>
                                    <br>
                                    <p>Nossa Pomada Brilho promove uma alta fixação para cabelos grossos e efeito brilho (molhado) aos fios. É ideal para modelar e estruturar penteados.</p>
                                    </br>
                        </figcaption>
                    </figure>       
                </li>
            </ul>
</div>

CSS completo

.caixa, .service, .itens{
    margin: 2cm;
    border: solid #ffff 1em;
    border-radius: 2%;
    border-style: double;
}

Após as linhas dos produtos ainda há alguns itens como a parte de avaliação e localização que não estou conseguindo centralizar. Não consigo colocar todo o código aqui então, Esse é o repositório do git onde estou colocando o versionamento do código a cada alteração se alguma boa alma tiver o interesse em me ajudar e me explicar serei muito grata.

TKS Guys!!