Bonjour besoin d'une petite aide !

je ne suis pas super douée en language HTLM ou CSS (débutante)
j'ai créer deux petits traits en htlm <hr> ( pour du texte descriptif d'images au dessus et en dessous)
et j'ai appliqué un css qui donne ça :
}
#trait_dessus
{
border-top: 1px solid #0000;
width: 38%;
}
#trait_dessous
{
border-top: 1px solid #0000;
width: 38%;
}
J'ai fais un copier coller du premier pavé (html) pour remplacer juste les images
mais, ça m'affiche un message d'erreur (html) (une petite croix dans un rond rouge à côté des lignes concernées) : id redefinition of [#trait_dessus]. et [#trait_dessous].
Je ne comprends pas très bien pourquoi alors que pour le premier pavé ça marche ???

Dois je pour chaque description image générer un nouveau CSS?

Merci d'avance pour vos réponses!

Si ça peux aider pour comprendre mon blabla ci-joint le code source.

<a href="#" class="presentation_link_color">
<figure class="figure_style">
<img src="Visuels/Affiches.jpg" width="535" height="1548" alt=""/>
<figcaption style="width:590px">
<h1 class="titre_img"> Affiche / retenue n°1</h1><br>
<div id="trait_dessus"><hr></div>Festival Rêves<br>
59,4 x 81,4 cm <br><div id="trait_dessous"><hr></div>
2016 (Strasbourg)

</figcaption>
</figure>
</a>
Bonjour et bienvenue sur le forum Smiley smile

Un ID doit être unique. Si ta règle s'applique à plusieurs éléments il faudrait plutôt utiliser des classes Smiley smile