Sur l'article http://lumieresdefrance.com/phpv2/modules/xmnews/article.php?news_id=39,
je te propose de modifier ton code qui liste des éléments sans que tu utilises une liste

par le code propre indiqué ici : https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/icons-in-a-list

Pourquoi me diras-tu ?

Regarde ce qui se passe pour la ligne "Parafoudre Type 2 (ou 3) pour éclairage à LED." quand tu changes la largeur.
Sur le mode md (je crois), le texte passe sous le logo ce qui est non seulement moche mais en plus bien moins lisible.

Avec le code que je te propose, quel que soit la largeur de l'affichage, il y aura toujours un décalage entre le logo qui indique la liste et le texte de la ligne concernée.

Le code :

Au fait, pour simplifier ton code, tu peux utiliser tes définitions de classe pour les couleurs.
Exemple :


peut se simplifier en utilisant ta définition de couleur comme cela


Bon, ce n'est pas tout à fait la même couleur mais je suis sur que tu comprends le principe.

Citation :lol vu sous cet angle, tu ne peux donc que progresser, donc c'est hyper motivant , tant mieux.
Oui, il faut que tu t'armes de courage, de ténacité et de patience...

ok et là ?
http://lumieresdefrance.com/phpv2/modules/xmnews/article.php?news_id=39

ok, répondu en MP
A force , tu vas de venir un super webmaster sous XOOPS, si si, ça va venir

Si tu met "p-5" ça passe
mais 5 pour une marge intérieure c'est vraiment beaucoup,
tu peux limiter pour les droites/ gauche déjà,
ensuite, tu peux réduire à 2
puis différencier la largeur du padding en fonction de la largeur de l'écran
ça donnerait un truc de ce genre

"p-2 p-lg-5"
A tester

Normal
tu n'as pas compris ce que j'ai indiqué plus haut.
Tu as ajouté un container
il est lui même dans un container (celui du thème).
or tu ajoutes une marge droite/gauche/haut/bas de 5


donc normale que tu débordes.
Il ne faut pas confondre les :
m pour marge, c'est une marge à l'EXTERIEUR du parent
p pour padding, c'est l'espace à l'interieur du parent, en limite de bordure.

Je vais te donner une astuce pour rapidement comprendre d'où vient le problème.
Quand je me retrouve avec le même type de problème, il y a un truc a faire tout de suite :
Il faut que tu mettes un fond sur l'objet parent (container) puis au fur et a mesure, sur les objets enfants (row puis div) avec d'autres couleurs.
Pour ton soucis,
remplace le code ci-dessus par

tu vas rapidement comprendre d'où vient le problème.

Au fait, en MP, je te suggère de me proposer un compte avec des droits de rédaction de news, (pas le compte test).

Il te manque un < /div > pour fermer le 1er "row" ...

Ensuite, nul besoin de remettre des "row",
si tu veux forcer le passage à la ligne :

https://getbootstrap.com/docs/4.6/layout/grid/#equal-width-multi-line

pour répondre pour les espaces :
oui donc on applique certaines marges pour le bloc 1 (bloc de gauche et bloc haut en mode md)
et UNIQUEMENT...

mr-md-3 = margin-right pour écrans > 992 px =3 : oui,
mb-2 = margin-bottom =2 : oui
mb-md-0 = pas compris ???

pas de marge en bas si on est au dessus de md, c'est à dire quand les blocs sont l'uns à côté de l'autre.

Bootstrap est un ensemble de css en priorité pour les petits écrans et donc l'auteur est parti du principe qu'on commence les propriétés pour les petite largeurs puis on va vers les grands écrans.

Donc
mb-2 : on met un espace bas de 2 entre xs à mb
puis
mb-md-0 : à partir de md, on ne met plus d'espace en bas

oui très mal, lol.
tu n'as par exemple pas besoin d'espace en bas quand les deux blocs sont l'un à côté de l'autre.

La solution "optimale" est ici : https://codepen.io/alain01/details/GRvEdgo


J'avoue qu'au début, ce code semble vraiment obscur et n'est vraiment pas évident, mais à force... on y arrive.
Si besoin, je peux te le détailler.
La bible ? ça se passe ici : https://getbootstrap.com/docs/4.6/utilities/spacing/