All solutions

Nesse desafio tive que usar algumas tags para marcar o e estilizar no css, cada ponto era muito espacífico, porem fiquei com duvida se deveria fazer da forma que fiz

Não consegui deixar alguns pontos do código como era para ficar, gostaria de uma ajuda para corrigir essas imperfeiçoes

<div class="instrucoes">
                <h3 class="sub-titulo">Instructions</h3>
                <ul>
                    <ol>
                        <li>
                            <strong class="text-color">Beat the eggs:</strong> In a bowl, beat the eggs with a pinch of
                            salt and pepper until they are well mixed.
                            You can add a tablespoon of water or milk for a fluffier texture.
                        </li>
                        <li><strong class="text-color">Heat the pan:</strong> Place a non-stick frying pan over medium
                            heat and add butter or oil.</li>
                        <li>
                            <strong class="text-color">Cook the omelette:</strong> Once the butter is melted and
                            bubbling, pour in the eggs. Tilt the pan to ensure
                            the eggs evenly coat the surface.
                        </li>
                        <li>
                            <strong class="text-color">Add fillings (optional):</strong> When the eggs begin to set at
                            the edges but are still slightly runny in the
                            middle, sprinkle your chosen fillings over one half of the omelette.
                        </li>
                        <li>
                            <strong class="text-color">Fold and serve:</strong> As the omelette continues to cook,
                            carefully lift one edge and fold it over the
                            fillings. Let it cook for another minute, then slide it onto a plate.
                        </li>
                        <li><strong class="text-color">Enjoy:</strong> Serve hot, with additional salt and pepper if
                            needed.</li>
                    </ol>
                </ul>
            </div>

GridCss: Achei difícil usar o Grid então usei FlexBox para desenvolver o card, mas pretendo compreender o Grid e usa-lo em projetos futuros.

RESET DA PÁGINA HTML

*{ margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    text-decoration: none;
  }


* ul li{
    list-style: none;}


* a{ text-decoration: none;
    color: inherit;}

FlexBox: O layout flexível permite que os elementos responsivos dentro de um contêiner sejam organizados automaticamente, dependendo do tamanho da tela.

display:flex;
flex-derection: column; ou row

CONTAINER

<section class='container'>

      <header class='card'>
      </header>

      <article class='content'>
      </article>
</section>