Meu projeto: Cafeteria | HTML5 e CSS3 parte 1: crie uma página da Web

Pra exercitar o aprendizado do curso montei o site da minha cafeteria.

Identifiquei um problema: no meu monitor o site fica alinhado corretamente, mas quando jogo a aba pra tela do meu notebook, que é menor, as imagens ficam desalinhadas com o texto. Quem puder me dar um feedback vou agradecer.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

HTML

<!DOCTYPE html>
<html lang = "pt-br">

    <head>

        <meta charset="UTF-8">
        <tittle>Jariu's Coffee Shop</tittle>
        <link rel="stylesheet" href="style.css">

    </head>

    <body>

        <header>
            <h1 class="titulo-principal">Jariu's Coffee Shop</h1>
        </header>

        <img id="cafeteria1" src="cafeteria1.jfif">

        <div class="principal">

            <h2 class="titulo-centralizado">Come and visit Jariu's Coffee Shop</h2>

            <p>Located in the heart of the city, <strong>Jariu's Coffee Shop</strong> brings to the market the best in terms of quality and varieties of coffee.
            Founded in 2022, Jariu's Coffee Shop is already a highlight in the city and conquers new customers and coffee enthusiasts every day.</p>

            <p id="missao"><em>Your mission is: <strong>Bring for our costumer's taste the best in terms of quality and variety!</strong></em></p>

            <p>We offer qualified professionals who are passionate about coffee.
            The service has a standard of excellence and agility, ensuring quality and satisfaction of our customers.</p>

        </div>

        <div>
            <h3 class="sabores">Coffee options</h3>

            <ul class="opcoes">
                <li class="itens">Espresso</li>
                <li class="itens">Cappuccino</li>
                <li class="itens">Arabic coffee</li>
                <li class="itens">Irish coffee</li>
                <li class="itens">Caffe latte</li>
                <li class="itens">Macchiato</li>
                <li class="itens">Mocha</li>
                <li class="itens">Ristretto</li>

            </ul>

            <img src="cafe1.jpg" class="imagemcafe1">

        </div>

        <div>

            <h4>Contact us</h4>

            <ul class="contatos">

                <li class="lista">Whatsapp: (00) 0000-0000</li>
                <li class="lista">Instagram: @jariuscoffeeshop</li>
                <li class="lista">Facebook: Jarius Coffee Shop</li>
                <li class="lista">E-mail: jariuscoffeeshop@mail.com.br</li>

            </ul>

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

        </div>

    </body>

CSS

body {
    background-color: #fcf0f0;
}

h1 {
    padding: 30px;
    font: bolder 35pt Tahoma;
}

#cafeteria1 {

    width: 99%;
    margin-left: 10px;
    margin-right: 10px;
}

h2 {
    background: #925959;
    text-align: center;
    font: bolder 20pt Tahoma;
    margin-left: 10px;
    margin-right: 10px;
}

p {
    font: normal 15pt Tahoma;
    text-align: center;
    margin: 30px;
    padding: 10px;
}

#missao {
    font-size: 20px;
}

em strong {
    color: #963939;
}

h3 {

    background: #925959;
    text-align: center;
    font: bolder 25pt Tahoma;
    margin-left: 10px;
    margin-right: 10px;
}

.opcoes {

    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 25%;
    font: italic 22pt Tahoma;

}

.imagemcafe1 {
    width: 30%;    
    margin-left: 400px;
    padding-right: 25px;
}

h4 {

    background: #925959;
    text-align: center;
    font: bolder 20pt Tahoma;
    margin-left: 10px;
    margin-right: 10px;
}

.contatos {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 25%;
    font: italic 15pt Tahoma;
}

.grao {
    width: 30%;    
    margin-left: 400px;
    padding-right: 25px;
}

Mergulhe em programação