Coucou :3
Ta fiche est plutôt réussie bravo.

Alors, je commence par ce que tu as spécifié comme souci pour ton code.
Les listes ordonnées et non ordonnées ont une mise en forme spéciale par défaut. Ce sont des blocs avec un espacement en haut et en bas et indentées par rapport au contenu de la page. Le CSS par défaut d'une liste ul est comme suite :

Code:

ul {
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1 em;
    padding-left: 40px;
}

Donc pour enlever l'espace il faut ajouter un padding-left à la liste, de valeur 0 ou une petite valeur pour garder un peu d'espace quand même.

Pour changer la couleur de hr, tu peux utiliser la propriété border, par exemple :

Code:

hr {
  border: 1px solid white;
}


Va mettre la ligne en blanc.

Maintenant pour les remarques sur le code :

Code:

<div class="icon haut" style="background-image:url('https://www.zupimages.net/up/18/11/sros.png'); background-size:cover;"></div>

Dans le codage il y a deux sortes d'images : les images qui font partie du contenu de la page et qui ont donc un  "sens" et les images décoratives qui n'ont aucune importance par rapport au contenu comme les fleurs dans la fiche. Les images décoratives sont mise en arrière plan via le CSS vu que c'est le langage responsable sur tout ce qui est déco et style. Par contre les images de contenu sont mises dans le HTML.
Je peux voir que tu as bien compris la différence vu que tu as mis les fleurs en CSS et l'icône dans le HTML, ce qui est super, par contre le problème c'est que tu les as inséré en arrière-plan via style, ce qui revient à réduire le sens de l’icône en image décorative alors que ce n'est pas le cas. Ici il sera plus judicieux d'insérer les icônes via la balise img vu que c'est ainsi qu'on insère une image en HTML.
Je ne sais pas si ce que j'ai dit est clair pour toi, en gros, techniquement tu peux utiliser la balise img ou la propriété background pour insérer une image ça donnera le même résultat visuel mais sémantiquement ce n'est pas la même chose, l'outil utilisé dépendra donc de si l'image fait partie du contenu de la page ou non.

Code:

<span>Petite citation</span></br>
  <div class="bloc1 cara">CARACTÈRE</br>
    <p> texte... </p>

div et p sont des blocs et donc ils se mettront toujours sur une nouvelle ligne, ici les br sont superflus.
De même pour la partie physique.

Je passe au CSS :

Code:

.fond span{
  margin:10px;
}

span et margin ne vont pas ensemble :p, une span est un élément inline et donc ne peux pas avoir une marge. Tu peux mettre une marge haute à ton bloc qui suit la span si tu veux augmenter l'espace entre les deux.

z-index gère les superpositions entre deux blocs positionnés. Ici seul ton icône est en absolu donc elle sera toujours en avant, tu n'auras donc pas besoin du z-index ici.

Sinon pour quelqu'un qui tâtonne tes positionnements sont bons, pas de soucis :p

Voilà je crois que c'est tout, bravo :3