When inserting html code from javascript, css fails

I have a code in javascript that accesses to firebase to obtain information and then inserts html code with this information. All this does but not as expected. For example, it uses images but instead of putting them with a specific size, it puts it to the maximum size, occupying the whole screen. Another thing would be the letas that instead of being written in white are put in a gray color. And of course all disorganized.

I was wondering if it was something I did not take into account, or just something I'm doing wrong, so I put the code here:

.
.
.
<div class="container-fluid">
<div class="card-group" id="ejemplo"> 







<script src="https://www.gstatic.com/firebasejs/5.7.2/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
.
.
.
.
};
firebase.initializeApp(config);

var database = firebase.database();
var numerojaja=-1;


var aaaa= firebase.database().ref("/peliculas/");          // hacemos una referencia al nodo de peliculas


aaaa.once("value",function(snapshot){            // accedemos a la base de datos 

var vector=[];                           // creamos un vector

snapshot.forEach(function(child){        // por cada hijo de "peliculas"

vector.push(child.key);          // pusheamos dicho hijo, ya que esta en orden ascendente

});      
// window.alert("hola");
var ejemplo = document.getElementById("ejemplo");                                            // una vez terminado la obtencion de los indices de los hijos de "peliculas"
for(var i = vector.length-1; i>=0;i--){       // hacemos un bucle para acceder al vector en orden inverso

aaaa.child(vector[i]).once('value').then(function(snapshot){     // accedemos al hijo que tiene el identificador de la ultima posicion del vector


ejemplo.insertAdjacentHTML("beforeend",'<div class="col-xs-12 col-sm-6  col-md-4  col-lg-3">');
ejemplo.insertAdjacentHTML("beforeend",'<div class="card">');
ejemplo.insertAdjacentHTML("beforeend",'<img class="card-img-top" src="'+snapshot.val().cartelera+'" alt="Card image cap" >');
ejemplo.insertAdjacentHTML("beforeend",'<div class="card-body">');
ejemplo.insertAdjacentHTML("beforeend",'<p class="card-title"> '+snapshot.val().nombre+'</p>');
ejemplo.insertAdjacentHTML("beforeend",'<i class="descripcion">'+snapshot.val().descripcion+'</i>');
ejemplo.insertAdjacentHTML("beforeend",'<br>');
ejemplo.insertAdjacentHTML("beforeend",'<i class="cocos">'+snapshot.val().reputacion+' cocos sobre 5</i>');
ejemplo.insertAdjacentHTML("beforeend",'</div>');
ejemplo.insertAdjacentHTML("beforeend",'</div>');
ejemplo.insertAdjacentHTML("beforeend",'</div>');





});                                                                                                  

}                                                                                                      
});                                                                                      




</script>

I also have how tags should be in html, but with the data locally (so if everything works well).

<div class="col-xs-12 col-sm-6  col-md-4  col-lg-3">
<div class="card">
<img class="card-img-top" src="imagenes/ep1.jpg" alt="Card image cap" >
<div class="card-body">
<p class="card-title"> Star Wars Episodio 1, la amenaza fantasma</p>
<i class="descripcion">Dual of fates.</i>
<br>
<i class="cocos">3 cocos sobre 5</i>
</div>
</div>
</div>

In the css file I have:

    body {

      background-color: #0F171E;
       min-height: 100%;
            min-width: 800px;

            /* Escalamiento proporcional */
            width: 100%;
            height: auto;



    }

    .navbar{
        background-color:rgba(000, 000, 000, 0.4);
        color:white;



    }



    .cocos{
        font-size:10px;

    }

    .descripcion{
        font-size:20px;

    }

    .card-title{
        font-size:25px;



    }

    .card{
        background-color:rgba(255, 255, 255, 0.0);
        width: 18rem;
        color:white;
        font-family:trebuchet-ms;
    }