Problema no display: flex

Quando você usa display: flex e flex-wrap: wrap em uma div pai (no seu caso, a div "receitas"), a ideia é que os itens dentro dessa div se comportem como blocos flexíveis e quebrem para a próxima linha quando não couberem mais na largura disponível.

Se as imagens e outros elementos estão em uma única coluna abaixo da outra, é possível que os elementos filhos da div "receitas" não tenham uma largura definida ou não estejam configurados corretamente como itens flexíveis.

Aqui está um exemplo simples de como você pode configurar isso:

.receitas {
  display: flex;
  flex-wrap: wrap;
}

.item-receita {
  /* Defina uma largura para os itens */
  width: 30%; /* Por exemplo, 30% da largura do pai */
  /* Isso permite que três itens apareçam lado a lado em telas largas */

  /* Outras propriedades de estilo para os itens, como margens, preenchimento, etc. */
  margin: 10px;
}

Lembre-se de que você deve ajustar a largura dos itens de acordo com o layout desejado e adicionar suas próprias propriedades de estilo. O importante é que cada item tenha uma largura definida para que o flex-wrap: wrap funcione como esperado.

espero ter ajudao ou pelomenos mostrado uma luz sobre o problema.

Ajudou sim. vou tentar e depois venho falar. obrigado!