I don't know why inside the div that I have the shadow box, everything fits perfectly until I put an el background:color
with any color and it comes out. Do you know why?
.cajaSombra {
border-radius: 0.5em;
border: none;
box-shadow: 1px 1px 4px 1px rgba(3, 1, 32, 0.3);
box-sizing: border-box;
}
.BotonAzul {
border-radius: 1em;
border: none;
background-color: var(--third-color);
color: white;
padding: 0.5em;
margin: 1em 0em;
text-align:center;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<main class="container">
<div class="row">
<!--suscripciones-->
<div class="col-6">
<h2 class="h2 m-0 titulos">Suscripciones</h2>
<hr>
<!--Plan suscripcion -->
<p>Plan actual:No tiene ningun plan seleccionado</p>
<p>Elige el plan que mejor se adapte al número de ususarios y a las prestaciones que necesites</p>
<!--boton ver planes -->
<button class="BotonAzul">Ver Planes</button>
</div>
<div class="col-6">
<div class="cajaSombra">
<h2 class="h2 titulos">Facturas Emitidas</h2>
<hr>
<div class="row">
<!--Numero de factura -->
<div class="col-4 bg-black">
<h3 class="h3">Numero factura</h3>
</div>
<!-- Fecha -->
<div class="col-4 text-center">
<h3 class="h3 m-0">Fecha</h3>
</div>
<!-- Descarga PDF -->
<div class="col-4">
<h3 class="h3 m-0">Descargar PDF</h3>
</div>
</div>
</div>
</div>
</div>
</main>
It happens to you because it comes out you will have put some kind of margin or something similar. In the code that you have passed I do not know where the dark background is, but as you will see in the css the first class of all I have added an overflow:hidden that what it does is that everything that is left over comes out of the box that I do not know see.