ил проектный запрос, который я просто не могу на всю жизнь отработать. Рассмотрим это изображение, показывающее загрузочную сетку с 12-колоночной разметкой

3 черных прямоугольника представляют:

Колонна прокладкиОсновная область контентаИнтерактивная карта

Раздел3 это проблема; он должен быть идеально выровнен по сеточной системе внутри.container, а также подойдите прямо к краю экранабез переполнения, Как разделы1 + 2 не добавляйте до 6 столбцов, у меня трудный размер раздел3.

Мне не удалось найти какое-либо жизнеспособное решение - самое близкое (которое все еще довольно далеко), чтобыиспользовать псевдо-элементы в сетке - единственная проблема в том, что невозможно поместить карту внутрь псевдоэлемента.

Обратите внимание, что на данный момент у меня уже есть решение JavaScipt, я ищу решение только для CSS / HTML, чтобы уменьшить мерцание при загрузке страницы.

Как было запрошено, вот несколько изображений, которые, я надеюсь, сделают запрос более понятным.

До - между картой и краем области просмотра есть промежуток:

После - карта выравнивается по сетке начальной загрузки фиксированной ширины и краю области просмотра:

Какой-то псевдокод

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