INCLUSÃO DE MAIS UMA FOTO ALINHADA A ESQUERDA

Eu gostaria de saber como colocar mais uma foto conforme abaixo.

No navegador a foto aparece abaixo da foto utensilios, contudo, quando vou para o CSS não consigo alinhar a foto abaixo da foto utensilios a esquerda do navegador. Ja fiz algumas tentativas com margin mas nenhuma funciona. Repeti a marcação da class utensilios mas também sem exito. Eu quero colocar uma fota abaixo da outra em alinhamento. utensilio.jpg e foto1.jpg. Existe algum limitador nessa section?

<section class="principal"> 

                    <h2 class="titulo-principal"> Sobre a Barbearia Alura</h2> 

                    <img class="utensilios" src="utensilios.jpg" alt="logo de utensilios" >


                    <p >Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. 
                        Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>

                    <p id="missão" > <em>Nossa missão é: 
                        <strong>"Proporcionar auto-estima e qualidade de vida aos clientes".</strong></em></p>

                    <p> Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. 
                        O atendimento possui padrão de excelência e agilidade, garantindo 
                        qualidade e satisfação dos nossos clientes.</p>

                    <img class="foto1"  src="foto1.jpg">

                </section>

.utensilios{
    width: 120px;
    float: left;
    margin: 0 20px 20px 0;
}

.foto1{
    width: 120px;
    float: left;
   margin: 0 20px 20px 0;
}