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/

donc ça donnerait :
mr-md-3 = margin-right pour écrans > 992 px =3
mb-2 = margin-bottom =2
mb-md-0 = pas compris ???

Bon, bien je n'arrive pas à faire appliquer les marges et les saut de colonne, du coup je les ai retirées

Mais si j'utilise 1 container 12 colonnes, puis au dessous 2 container de 6 colonnes... les marges ne sont pas alignées par défaut. c'est normal?

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

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

Merci Alain, c'est plus clair.

Alain, si je copie ton code (uniquement la 1ère partie), il sort de mon bloc sous Xmnews
Voir ici : http://lumieresdefrance.com/phpv2/modules/xmnews/article.php?news_id=28

Citation :

Alain, si je copie ton code (uniquement la 1ère partie), il sort de mon bloc sous Xmnews
Voir ici : http://lumieresdefrance.com/phpv2/modules/xmnews/article.php?news_id=28

Citation :

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).

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