Bootstrap 4 Vertical Timeline Columns aren't on same row [Large Margin] - html

Question

I am coding my first website. I am attempting to create a vertical timeline using Bootstrap 4, where the bar of the timeline is in between two columns. Currently, I cannot place text in the first column and an image directly to the right in the second column. The image is always pushed down to the next row. When I examine the element, I notice a large margin (orange area). How do I remove this?
This is my first post on Stack Overflow. I apologize if this is a bit long.
Thanks!
Relevant Code
<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%;
}
Inspection of Element Screenshot
Website Link (for more detailed inspection)

Answer 1

You can use below css in your style.
.timeline-item-left,.timeline-item-left {display: flex}
and remove class offset-md-6.

Answer 2

Try below
.timeline-item-left {
padding: 10px 30px;
position: relative;
background-color: white;
width: 100%;
display: flex;
}
remove offset-md-6
<div class="offset-md-6 col-md-6 text-left">