imagen fuera del contenedor solo un lado

Estoy usando Bootstrap 4. Tengo un contenedor con div que está fuera del contenedor en el lado derecho. ¿Es posible hacer lo mismo con una imagen div? Lo hice con pseudo-elemento: después y “otro” color de fondo. (Si no entiendes lo que quiero lograr

enter image description here

body { overflow-x: hidden; } .box { background-color: #F0F6FB; padding: 120px 20px; margin-right: 0; margin-left: auto; margin-top: -125px; position: relative; border-radius: 50px 0px 0px 50px; } .box:after { content: ''; position: absolute; top: 0; bottom: 0; left: 80%; right: -3000px; background: #F0F6FB; z-index: -1; } .box-image { background: url(https://images5.alphacoders.com/456/456536.jpg); height: 230px; border-radius: 0px 50px 50px 0px; margin-top: 60px; background-size: cover; background-position: 50% 50%; z-index: 1; position: relative; } 
           







 
 








Puede usar fluido contenedor solo para la imagen. He editado el código.

 body { overflow-x: hidden; } .box { background-color: #F0F6FB; padding: 120px 20px; margin-right: 0; margin-left: auto; margin-top: -125px; position: relative; border-radius: 50px 0px 0px 50px; } .box:after { content: ''; position: absolute; top: 0; bottom: 0; left: 80%; right: -3000px; background: #F0F6FB; z-index: -1; } .box-image { background: url(http://sofes.miximages.com/html/456536.jpg); height: 230px; border-radius: 0px 50px 50px 0px; margin-top: 60px; background-size: cover; background-position: 50% 50%; z-index: 1; position: relative; } 
           







 
 








Espero que esto pueda ayudar:

 body { overflow-x: hidden; } .box { background-color: #F0F6FB; padding: 120px 20px; margin-right: 0; margin-left: auto; margin-top: -125px; position: relative; border-radius: 50px 0px 0px 50px; } .box:after { content: ''; position: absolute; top: 0; bottom: 0; left: 80%; right: -3000px; background: #F0F6FB; z-index: -1; } .box-image { background: url(http://sofes.miximages.com/html/456536.jpg); height: 230px; border-radius: 0px 50px 50px 0px; margin-top: 60px; background-size: cover; background-position: 50% 50%; z-index: 1; position: relative; width: 80%; } 
           







 
 








 body { overflow-x: hidden; } .box { background-color: #F0F6FB; padding: 120px 20px; margin-right: 0; margin-left: auto; margin-top: -125px; position: relative; border-radius: 50px 0px 0px 50px; } .box:after { content: ''; position: absolute; top: 0; bottom: 0; left: 80%; right: -3000px; background: #F0F6FB; z-index: -1; } .box-image { background: url(http://sofes.miximages.com/html/456536.jpg); height: 230px; border-radius: 0px 50px 50px 0px; margin-top: 60px; background-size: cover; background-position: 50% 50%; z-index: 1; position: relative; } .box-image:after { content: ''; position: absolute; top: 0; bottom: 0; right: 80%; left: -3000px; background: #FF0000; z-index: 1; }