Bootstrap 4 Выровняйте поля отдельных объектов

Question

Я столкнулся с проблемой, которую не могу обернуть.Используя Bootstrap 4 и HTML, и я не очень хорошо разбираюсь в CSS или CSS3, это мое первое обязательство заставить вещи выравнивать или следовать дизайну, который был передан от дизайнера, и поместить его в html и css.

Мне нужно выровнять конец одной строки или контейнера с правым полем верхнего ползунка, и мне нужно сделать то же самое для второго ряда или контейнера, за исключением выравнивания его с противоположным полем верхнего ползунка.

Чтобы лучше объяснить, пожалуйста, обратитесь к изображению. Мне нужно, чтобы изображение, которое находится в этих строках или контейнерах, было отзывчивым и увеличивалось по мере роста строки или контейнера и остановки до тех пор, пока оно не достигнет красных линий.

Вот мой код:

    <div class="container">
        <div class="row">
            <div id="slider20" class="rev_slider" style="width:100%;">
                <ul style="padding-left: 0px;"> 
                    <div class="caption">
                        <h1 class="jumbo-text">some text</h1>
                    </div>
                    <li data-transition="slideleft" data-slotamount="1" data-thumb="/*/img5_thumb.jpg"> 
                        <img src="assets/images/background.jpg" class="img-responsive" style="width:100%; height:100%;"> 
                    </li>                         
                </ul>                     
            </div>
        </div>
    </div>
    <div class="flex-nowrap align-items-start align-content-start d-flex flex-row-reverse justify-content-start container-fluid" style="padding-left: 0;
padding-right: 0;">
        <div class="row ml-auto">
            <img src="assets/images/elipseleft1.png" width="100%" />
        </div>
    </div>