Atividades | HTML e CSS: Classes, posicionamento e Flexbox

Olá, nesse codigo aprendi bastante codando, gostei bastante das atividades. Não foi nescessário pesquisar, mas implementei bastante coisa que nao foi pedido, e é assim que eu gosto, quando consigo fazer mais que o esperado.

Quero conseguir deixar mais compacto e organizado, tlvz dps de um tempo de estudo eu volte nele e o refaça.

Mas é isso.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercicios </title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header class="titulo">VENDAS NOW</header>


    <main class="vendas">
        <h1>Vendas On-line</h1>
        <h3>Aqui vendemos diversos tipos de produtos.</h3>
        <p>Venha nos conhecer!</p>
        <img src="vensdasa.jpg" alt="logo vendas">
    </main>

    <div class="produtos">  
        <p>Aqui estão alguns dos produtos que vendemos</p>
        <br>
        <ol>
        <li>Celulares</li>
        <li>Pc's</li>
        <li>Fones</li>
        </ol>
    </div>

    <footer class="rodape"> Venha nos conhecer!</footer>
</body>
</html>

*{
   margin: 0;
   padding: 0;
}


body{
   background-color: black;
   color: antiquewhite;
   height: 100vh; 
   box-sizing: border-box;
   border: groove;
   border-radius: 5px;
   border-color: goldenrod;
}


.titulo{
   height: 100px;
   display: flex;
   align-items: center;
   margin-bottom: 80px;
   padding-left: 600px;
   color: rgb(255, 183, 0);
   background-color: antiquewhite;
}


.vendas { 
   display: flex;
   align-items: center;
   justify-content: space-evenly;
   height: 250px;
   
   margin-left: 80px; 
   margin-right:  80px;
   margin-bottom: 80px;
}

img{
   height: 200px;
}

.produtos{
   display: flex;
   align-items: center;
   flex-direction: column;
}

.rodape{
   display: flex;
   text-align: left;
   margin-top: 65px;
}

Mergulhe em programação