Ir al contenido
angel.library

Sección full-bleed dentro de un container

.full-bleed {
width: 100vw;
margin-inline: calc(50% - 50vw);
}

El elemento mide el viewport y compensa la mitad de la diferencia entre su contenedor y la pantalla.

Si aparece scroll horizontal por el ancho de la scrollbar, prefiere unidades dinámicas disponibles en tu matriz de soporte o un layout Grid de tres columnas:

.page {
display: grid;
grid-template-columns: 1fr min(65ch, calc(100% - 2rem)) 1fr;
}
.page > * {
grid-column: 2;
}
.page > .full-bleed {
grid-column: 1 / -1;
width: auto;
margin: 0;
}

El patrón con Grid es más robusto cuando controlas el layout padre; el truco con 100vw sirve para contenido Markdown donde solo puedes agregar una clase al bloque puntual.