Obtuve una solicitud de diseño que simplemente no puedo por la vida de mi trabajo. Considere esta imagen que muestra la cuadrícula bootstrap con un diseño de 12 columnas:

Los 3 rectángulos negros representan:

Una columna de rellenoÁrea de contenido principalMapa interactivo

Sección3 es el problema; debe estar perfectamente alineado con el sistema de cuadrícula dentro del.container, y también ir hasta el borde de la pantallasin desbordarse. Como secciones1 + 2 no agregue hasta 6 columnas, estoy teniendo dificultades para dimensionar la sección3.

No he logrado encontrar ninguna solución viable; lo más cercano (que todavía está bastante lejos) eshacer uso de pseudoelementos en el sistema de cuadrícula - El único problema con eso es que no es posible poner el mapa dentro de un pseudo-elemento.

Tenga en cuenta que, por el momento, ya tengo una solución JavaScipt, estoy buscando una solución única de CSS / HTML para reducir el parpadeo en la carga de la página.

Como se ha solicitado, aquí hay algunas imágenes que espero aclaren la solicitud.

Antes, hay un espacio entre el mapa y el borde de la ventana gráfica:

Después: el mapa se alinea con la cuadrícula de arranque de ancho fijo y el borde de la ventana gráfica:

Algunos pseudocódigo

<div class="section left-content side-map">
    <div class="container">
        <div class="col-sm-8 col-lg-7 col-lg-offset-1">
            Content - remain unchanged
        </div>
        <div class="col-sm-4 col-lg-3 col-lg-offset-1">
            <div id="contact-map">
                Map here - need to extend to viewport edge
            </div>
        </div>
    </div>
</div>