Bootstrap 4 вертикальных столбца шкалы времени не находятся в одном ряду [Large Margin]

Question

Я кодирую свой первый сайт. Я пытаюсь создать вертикальную временную шкалу, используя Bootstrap 4, где полоса временной шкалы находится между двумя столбцами. В настоящее время я не могу разместить текст в первом столбце, а изображение прямо справа во втором столбце. Изображение всегда опускается до следующего ряда. Когда я рассматриваю элемент, я замечаю большое поле (оранжевая область). Как мне это убрать? Это мой первый пост о переполнении стека. Я прошу прощения, если это немного долго. Спасибо!

Соответствующий код

<div class="row mt-3 no-gutters">
    <div class="col-md-12">
      <div class="timeline">
        <div class="timeline-item-left">
          <div class="col-md-6 text-right p-3 mr-0">
            <h3>December 2017</h3>
            <h5>Big Basin Redwoods State Park </h5>
            Berry Creek Falls Loop | 10 Miles             
          </div>
          <div class="offset-md-6 col-md-6 text-left">
            <a href="adventure_images/big_basin.jpg">
              <img src="adventure_images/big_basin.jpg" class="img-thumbnail" alt="Big Basin" width="150"> 
            </a>
          </div>         
        </div>

CSS

.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}
/* Containers around content */
.timeline-item-left {
    padding: 10px 30px;
    position: relative;
/*    background-image: <img src="adventure_images/spiration_light.png">;
    background-repeat: repeat-x; */
    background-color: white;
    width: 100%;
}
.timeline-item-right {
    padding: 10px 30px;
    position: relative;
/*    background-image: <img src"adventure_images/spiration_light.png">;
    background-repeat: repeat-x;*/
    background-color: white;
    width: 100%;
}  

Скриншот Инспекции Элемента

Ссылка на сайт (для более детальной проверки)

Answer 1

Вы можете использовать ниже CSS в своем стиле.

 .timeline-item-left,.timeline-item-left {display: flex}

и удалите класс offset-md-6.

Answer 2

Попробуй ниже

.timeline-item-left {
    padding: 10px 30px;
    position: relative;
    background-color: white;
    width: 100%;
    display: flex;
}

удалить смещение-MD-6

<div class="offset-md-6 col-md-6 text-left">