Bootstrap 4 scaling issue

Hi guys,
I’m trying to make my tribute page responsive and using a mobile first approach using bootstrap 4. I’m basically developing the webpage from 575px and then plan to scale it up accordingly. Please ignore all other screen sizes as they have not been finished.

My issue is, why does “#jumbo2” jumbotron and my iframe not scale well with the webpage? when i shrink them, the jumbotron goes upwards and off the page and my iframe goes out of view to the left, while my header, quote and image are scaling perfectly. Thanks.

please note that the background image may not load for you due to copyright reasons.

https://codepen.io/Modestas/pen/Jyexye?editors=1100