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

Question

Я хочу разместить элементы :: before (черный круг) и :: after друг над другом, чтобы создать кривую.

Пробелы по сторонам - это проблема: Возможно, это вызвано тем, что элемент evenRow исключает (я не знаю почему) остальную часть содержимого и только оборачивает ту большую часть содержимого, которое на всю ширину изображения.

Я попытался задать переполнение: скрыто в div (в данном случае - 'evenRow'), которое удаляет пустое пространство, но не позволяет переполнению абсолютно позиционированных элементов из div.

Так устроены элементы,

<div class="row evenRow">
        <div class="col-sm-12">
            <div class="section" style="background-color : #0d8ea9;">
                <h1>Latest News</h1>
                <ol>
                    <li>
                    MCBS completes supplies & installation of 
                    CCTV system in 18 Jails of Gujarat.
                    </li>
                    <li>
                    MCBS completes supplies & installation of 
                    Fibre 
                    Optic System to ITR (Defense organization)
                    </li>
                    <li>
                    MCBS completes supplies & installation of CCTV
                    project for Master Control Facility (MCF)
                    at Bhopal for ISRO.
                    </li>
            </ol>
        </div>
    </div>
</div>

Некоторые вещи, которые могут помочь:

• Я использую Bootstrap-3
• При изменении размера окна ниже 767 пикселей пропуски исчезают (нужно что-то делать с начальной загрузкой), и это работает!
• Я попытался структурировать свой код в соответствии с этим ответом . это именно то, как я хочу, но это не сработало
• При проверке пробела это заполнение нижнего элемента (элемента под evenRow), и evenRow не оборачивает весь контент внутри него, а просто оборачивает псевдоэлементы.

Все предложения приветствуются!