Наложение CSS-изображений Не доходящие стороны

Question

Я создал наложение поверх своего изображения, чтобы текст был более заметным, увеличивая контрастность. Подобно тому, как они это делают на Pablo by Buffer

Я хочу добиться аналогичного эффекта, затемняя изображение. Но похоже, что мой оверлей не совсем покрывает весь образ.

Как вы можете наложить наложение, чтобы покрыть все изображение, а не его часть?

Мой codepen является here:

Вот CSS я использую для моего Overlay:

.overlay { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    background: rgba(0, 0, 0, 0.5); 
} 

Answer 1

накладываемых (контейнер) имеет набивку влево/вправо на 15px, который вызывает разрыв, удалить это, и вы устраните разрыв. Вы также можете добавить граничный радиус в оверлей, чтобы соответствовать изображению сзади.