Mysterious padding left-right on 320px width device - html

Question

I'm using bootstrap to make col grid's. In desktop and table it's work great, but in the xs-size (especially on the 320px device width, like an iPhone 5) it's shows an space on the right side, and I don't know why. You can see live here. You can see the snapshot here too, look at the space of the right side:
How I can fix it? I tried resize the font text but didn't worked.
<div class="container content-parent">
<div class="col-lg-12 mx-auto">
<div class="fila-animada">
<div class="row icons-info">
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mt-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/Icono%20Casa-04.png" />
<h2>ABIERTO 24/7</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Con seguridad las 24 horas y equipo humano a tu disposición.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mt-3 mb-2 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/Icono%20Wifi-04.png" />
<h2>FREE WI-FI</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Conectividad permanente en todas las instalaciones.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mt-3 mb-2 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/Icono-Silla%20ruedas-03.png" />
<h2>ACCESIBILIDAD</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Disponemos de zonas adaptadas y trabajamos en próximas mejoras.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mt-3 mb-2 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/Icono-Piscina.png" />
<h2>PISCINA</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Para disfrutar con los amigos o simplemente para relajarse o hacer deporte.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
</div>
</div>
<div class="fila-animada">
<div class="row icons-info">
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mb-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/Icono%20Libro-04.png" />
<h2>BIBLIOTECA</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Zona de estudio amplia y silenciosa donde estudiar, trabajar o hacer consultas.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mb-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/Icono%20Comedor-04.png" />
<h2>COMEDOR</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Gran zona común para disfrutar del desayuno, comida o cena.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mb-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/SALON-DE-ACTOS-03.png" />
<h2>SALÓN DE ACTOS</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Estancia destinada a eventos culturales y formativos, dónde puedes ser el protagonista.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mb-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/SALA-MULTIMEDIA-03.png" />
<h2>SALA MULTIMEDIA</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Espacio que permite jugar con la videoconsola, juegos de mesa, usar el karaoke o ver la TV.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
</div>
</div>
<div class="fila-animada">
<div class="row icons-info">
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mb-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/Icono%20Gym-04.png" />
<h2>GIMNASIO</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Recinto con todas las manquinarias e instalaciones necesarias para la actividad física.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mb-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/LAVANDERIA-03.png" />
<h2>LAVANDERÍA</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Zona completamente reformada para el lavado y secado de la ropa.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mb-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/chill.png" />
<h2>CHILL OUT</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Zonas ajardinadas y de chill out para encontrar la relajación y diversión que llevas dentro.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mb-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/Icono%20Comunidad-04.png" />
<h2>COMUNIDAD</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Estilo de vida basados en los valores del #WeAreRucab.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

The problem is the card flip's font size. The "back" sides of the card have text that's too long and it's causing you to horizontally scroll even though you can't see the content. Additionally, the "front" sides of the card has text wrapping in awkward places because the screen isn't wide enough to show a full word at that font size. I would add the following CSS in a media query that targets these smaller screens (not quite sure when you should bring the size down).
// Prevent the card back from creating a scroll bar
.card-flip .back .card-block p {
font-size: 13px;
}
// Lower the font size because the text wraps in a single word
#rucab .card-flip .front .card-block h2 {
font-size: 20px;
}
To debug things like this, I open my inspector in the browser and just start pressing the Delete key on divs until the problem goes away. Then once I find the one that "fixed" the problem, I start looking at the content of that container to figure out what's going wrong. I repeat this process for children inside the problem div until I can track down the issue.
Update:
I'm no longer experiencing the issue, but I see that you've now changed the flip card section to only be 1 card wide instead of two. That looks nice! That also fixes the problem of the words being too wide for the container, since the containers are now twice as wide.