Recebi um pedido de design que simplesmente não consigo para a minha vida. Considere esta imagem mostrando a grade de inicialização com um layout de 12 colunas:

Os três retângulos pretos representam:

Uma coluna de preenchimentoÁrea de conteúdo principalMapa interativo

Seção3 é o problema; ele precisa estar perfeitamente alinhado ao sistema de grade dentro do.container, e também vá até a borda da telasem transbordar. Como seções1 + 2 não adicione até 6 colunas, estou tendo dificuldades na seção de dimensionamento3.

Não consegui encontrar nenhuma solução viável - a mais próxima (que ainda é bastante distante) éfazer uso de pseudo-elementos no sistema de grade - o único problema é que não é possível colocar o mapa dentro de um pseudo-elemento.

Observe que, por enquanto, já tenho uma solução JavaScipt, estou procurando uma solução somente CSS / HTML para reduzir a oscilação no carregamento da página.

Conforme solicitado, aqui estão algumas imagens que, espero, tornem a solicitação mais clara.

Antes - existe um espaço entre o mapa e a borda da janela de visualização:

After - map está alinhado à grade de bootstrap de largura fixa e à borda da viewport:

Algum 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>