Pasa mucho tiempo pero no puede resolverlo. Mi CSS está bien. Pero, ¿por qué está imprimiendo línea por línea en innerHTML? Estoy usando una función asíncrona para obtener los datos.
1ra Función

 const deploySnipCard = (getSnip) => { for (x in getSnip) { const tech = getSnip[x].tech; const tags = getSnip[x].tags; const tagsUrl = getSnip[x].tagsUrl; const status = getSnip[x].status; const imgSrc = getSnip[x].imgSrc; const imgUrl = getSnip[x].imgUrl; const caption = getSnip[x].caption; appendCard(tech, tags, tagsUrl, status, imgSrc, imgUrl, caption); } };

2da función

 const appendCard = (tech, tags, tagsUrl, status, imgSrc, imgUrl, caption) => { const mainDiv = document.getElementById("root"); mainDiv.innerHTML += ` <div class="col-12 col-lg-4 col-md-6"> <div class="snip-card mt-5 p-2"> <div class="d-flex justify-content-between"> <div> <span class="badge bg-primary mb-2">${tech}</span> <a href="${tagsUrl}"> <span class="badge bg-danger mb-2 mx-1">${tags}</span></a> </div> <div> <span class="badge bg-success mb-2">${status}</span> </div> </div> <a href="${imgUrl}"> <div class="bg-dark"> <img class="card-img img-fluid" alt="click here" loading="lazy" src="${imgSrc}"> </div> </a> <p class="snip-card-cap my-2">${caption}</p> </div> </div>`; };

Producción:

Rendimiento esperado: