Extienda un elemento más allá del contenedor de arranque

Actualmente estoy trabajando en una de las maquetas con el uso de Bootstrap 4 y hay un elemento poco común dentro del contenedor, cuyo fondo se extiende más allá del contenedor. No estoy seguro de cómo exactamente se debe hacer esto. Intenté implementarlo con una posición: absoluta, pero no soy fanático de eso debido a la capacidad de respuesta en ese caso.

El elemento problemático es el texto “Ver el video” con el fondo.

Agradecería cualquier ayuda. Gracias.

Bosquejo

/* VIDEO */ .video { padding: 70px 0; position: relative; } .video .video-wrapper p { font-size: 14px; line-height: 30px; font-style: italic; margin-top: 10px; } .video .description-wrapper h3 { font-size: 20px; line-height: 25px; } .video .description-wrapper .box { padding: 10px 15px; } .bg-colored { color: #fff; background-color: #0b3b52; } 
            Videos   

Name video 5:45

Keep your club organized online, we save time and energy for you!

Watch the video

Managing a team could also be a hassle free and easy activity. CRM42 is a web based platform with a user friendly interface, offering a comfortable and profitable experience while using it. Create your new management strategy and focus on getting the best results. Your goal is now our goal!

CRM42 gives you a complete solution with a 360-degree view of your players, including complete management of their contracts, injuries, medicals, offers, past teams, even family members, bank accounts and all sponsors information. Accessible for your entire staff, anytime from anywhere.

Let's make something awesome together!

Básicamente, esto ya ha sido respondido , pero responderé dado que Bootstrap 4 flexbox es diferente a la otra respuesta 3.x.

Se puede hacer con un pseudo elemento que se extiende fuera de la columna:

https://www.codeply.com/go/tXGn5pdD4A

 .bg-colored:before { right: -999em; background: #0b3b52; content: ''; display: block; position: absolute; width: 999em; top: 0; bottom: 0; }