I want the website to be responsive for computer, smartphone and tablet

Hello. I want the website to be responsive for computer, smartphone and tablet. But I’m in trouble. I can’t fix the blue line of the css section .titleproduct, when I resize the window the line keeps moving and decreasing. In the css .listadeprodutos I want the images to be scaled up to the blue line of Products keeping the minimum spacing between columns column-gap: 4%. When I resize I also notice that the images are one on top of the other. The buttons are misaligned to the left. I need them to be in a line lined up and centered. I’ve tried everything, I searched the site and several tutorials and I couldn’t put the responsive one, I just failed.

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

.container {
    max-width: 1024px;
    width: 100%;
    margin: 0 auto;
}

header {
    background-color: #0e79e7;
}

header .container {
    padding: 16x 0;
    color: #ffffff;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


h1 {
    font-style: italic;
    padding: 10px;
}

header nav li {
    display: inline;
    margin-left: 16px;
    font-size: 21px;
    font-weight: bold;
}

header nav li a {
    color: #ffffff;
    text-decoration: none;
    margin-right: 8px;
}

.imagem-principal {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

header .container,
section .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

section .container {
    align-items: flex-start;
}

section {
    padding: 22px 0;
}

section h2 {
    padding-top: 10px;
    margin-bottom: 16px;
    font-style: italic;
    color: #0e79e7;
    border-bottom: 3px solid #0e79e7;
    padding-bottom: 10px;
    margin-right: 1px;
    margin-left: 1px;

}

.imagem-principal {
    margin: 0 auto;
}

section .texto {
    padding-top: 20px;
    white-space: normal;
    margin-right: 23px;
    margin-left: 23px;
}

.listadeprodutos {
    display: grid;
    grid-template-columns: repeat(4, 9%);

    column-gap: 4%;
}

.container,
.listadeprodutos {

    margin: 0 auto;
    justify-content: center;
    width: 85%;
}

button {
    display: block;
    width: 77%;
    padding: 8px 0;
    border: none;
    background-color: #0e79e7;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
}

section .títuloproduto {
    margin-right: 471.6px;
    margin-left: 448.6px;
}

@media screen and (max-width: 640px) {
    h1 {
        font-size: 26px;
        padding: 10px;
        font-weight: bold;
        justify-content: space-between;
    }

    header nav li {
        display: inline;
        font-size: 16px;
        font-weight: bold;
        justify-content: space-between;
    }

    .imagem-principal {
        display: block;
        margin: 0 auto;
        max-width: 90%;
    }

    header .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 100%;
    }

    section .container {
        display: block;
        align-items: center;
        justify-content: space-between;
        max-width: 100%;
    }

    .listadeprodutos {
        display: grid;
        grid-template-columns: repeat(1, 90%);
    }
}

@media screen and (min-width: 641px) and (max-width: 1023px) {
    .imagem-principal {
        display: block;
        margin: 0 auto;
        max-width: 95.3%;
    }

    header .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 100%;
    }

    section .container {
        display: block;
        align-items: center;
        justify-content: space-between;
        max-width: 100%;
    }

    .listadeprodutos {
        display: grid;
        grid-template-columns: repeat(2, 30%);
        column-gap: 1%;
    }
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EBAC Shoes</title>
    <link rel="stylesheet" href="./main.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>

<body>
    <header>
        <div class="container">
            <h1>EBAC Shoes</h1>
            <nav>
                <ul>
                    <li>
                        <a href="#sobre">Sobre a loja</a>
                    </li>
                    <li>
                        <a href="#contato">Contato</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    <section>
        <div class="container">
            <img class="imagem-principal" src="https://live.staticflickr.com/65535/52643926620_43e120edc1_o.jpg" alt="loja">
            <div class="texto">
                <h2>Sobre a loja</h2>
                <br>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Temporibus eum incidunt soluta?
                    Mollitia
                    hic, a, vero exercitationem amet earum sapiente expedita adipisci sed ea impedit facilis
                    aspernatur
                    omnis incidunt explicabo.</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, praesentium magni iusto autem
                    ipsam distinctio aut molestias laudantium, numquam voluptatum eius exercitationem ut asperiores
                    dolorem repudiandae quos ipsa perspiciatis dignissimos!</p>
            </div>
        </div>
    </section>
    <section>
        <h2 class="títuloproduto"> Produtos </h2>
        <div class="listadeprodutos">
            <article class="listadeproduto">
                <br><a href="#">
                    <img src="https://live.staticflickr.com/65535/52642982957_9431e2873e_o.jpg" alt="Tênis Nike Precision VI Masculino - Preto+Branco"> </a>
                    <br><br><h3>Tênis Nike Precision VI Masculino - Preto+Branco</h3>
                    <p>Tênis Nike preto, disponível nos tamanhos: 37, 38, 39, 40 e 42.</p>
                    <br><button type="button">Adicionar ao carrinho</button>
            </article>
            <article class="listadeproduto">
                <br><a href="#">
                    <img src="https://live.staticflickr.com/65535/52643489536_f2157764dc_o.jpg" alt="Tênis Mizuno Wave Titan 2 - Azul e Branco"> </a>
                    <br><br><h3>Tênis Mizuno Wave Titan 2 - Azul e Branco</h3>
                    <p>Tênis Mizuno azul, disponível nos tamanhos: 37, 38, 39, 40 e 42.</p>
                    <br><button type="button">Adicionar ao carrinho</button>
            </article>
            <article class="listadeproduto">
                <br><a href="#">
                    <img src="https://live.staticflickr.com/65535/52643964893_c4fc4401e2_o.jpg" alt="Tênis Asics Metaspeed Edge Unissex - Verde"> </a>
                    <br><br><h3>Tênis Asics Metaspeed Edge Unissex - Verde</h3>
                    <p>Tênis Asics Verde, disponível nos tamanhos: 37, 38, 39, 40 e 42.</p>
                    <br><button type="button">Adicionar ao carrinho</button>
            </article>
            <article class="listadeproduto">
                <br><a href="#">
                    <img src="https://live.staticflickr.com/65535/52643749724_75fab9775d_o.jpg" alt="Tênis Puma Comet 2 Alt SR BDP - Preto+Vermelho"> </a>
                    <br><br><h3>Tênis Puma Comet 2 Alt SR BDP - Preto+Vermelho</h3>
                    <p>Tênis Puma, disponível nos tamanhos: 37, 38, 39, 40 e 42.</p>
                    <br><button type="button">Adicionar ao carrinho</button>
            </article>
        </div>
    </section>
</body>

</html>

Second blue line of products continues to move infinitely and in a straight line when resizing the windows between
@media screen and (max-width: 640px) and @media screen and (min-width: 641px) and (max-width: 1023px). I tried with changing the code too:

section .títuloproduto {
    width: 831px;
    margin: 0 auto;
}

I also face same problem for my my website where I face many problems like unused CSS and DOM Size. For this I read complete details of Page speed for Internet and Phone. It was helpful to optimize pagespeed for computer, smartphone and tatblet.

Nowadays I’m also facing same issues regarding responsiveness of my website. Can any one help me to how can I make website responsive in desktop view. Best regards.