LAYOUT ACTUAL
Tengo un layout ya definido el cual consta de un contenedor(.container) que centra todo el contenido de la pagina, de las filas(.row) las cuales ayudan a crear divisiones horizontales dentro del contenedor y las columnas que ayudan a crear las divisiones verticales(.col) dentro de las filas. aquí el layout:
//utilizado para centrar todo el contenido de la pagina
.container() {
margin-left: auto;
margin-right: auto;
width: 90%;
max-width: $container-max-width;
}
//Wrap de las subdivisiones del layout
.row{
display: flex;
flex-wrap: wrap;
margin-right: -1rem;
margin-left: -1rem;
}
//divisiones del layout
.col{
padding-left: 1rem;
padding-right: 1rem;
flex: none; // 0 0 auto
width: 100%; //original del framework
}
//las divisiones van de 5 en 5 hasta 100 eje. col-5 col-10 etc
.col-15{
flex-basis: 15%;
max-width: 15%;
}
EL PROBLEMA
Estoy creando un sitio el cual tiene algunas secciones las cuales están subdivididas en dos, cada una de las subdivisiones ocupa el 50% del viewport. una de las subdivisiones tiene una imagen de background y la otra tiene contenido el cual debe estar alineado con el resto de la página.
La pregunta es como alinear un contenido sin el contenedor(.container) con el resto del contenido de la pagina que si lo tiene.
una imagen para ilustrar el problema, la línea amarilla representa el contenedor(.container) para la alineación de la página y el borde rojo de las imágenes indican que estos elementos se salen por fuera del layout normal de la página.