Image goes beyond column width in Bootstrap 4 - html

Question

I’m using Bootstrap grid incorrectly and I’m can’t for the life of me work it out!
I designed this page so that it would split the image alongside the copy. I thought a simple split col-6 row in “Over 40 years Media Experience” would do it but it looks like the image is over 50%.
I want the image to go the width of the column. I’ve tried img-fluid and img-responsive but nothing is working as well as the HUGE (and inelegant!) workaround (written in the following two containers.
If anyone could take a look and see if I’ve missed anything crashingly obvious. I’d be forever grateful.
<div class="container container-head">
<div class="row">
<div class="col-12">
<h2>Over 40 years’ <span class="spotlight">media experience</span></h2>
</div>
</div>
<div class="row">
<div class="col-6-md media">
<div class="fsm-about-pic image-fluid">
<img src="images/about-joncorrinenew640.jpg"
alt="Jon and Corinne from Full Story Media">
</div>
</div>
<div class="col-6-md media-body">
<p><i class="far fa-circle"></i> Full Story Media is led by us: Jon Card
and Corinne Card. <!-- this could be a subtitle now with bit below as a testimonial like the client quotes -->
</p>
<p><i class="far fa-circle"></i> With over 40 years’ media experience between
us, we have written for every national newspaper in the UK, plus many other titles
worldwide.</p>
<p><i class="far fa-circle"></i> We are entrepreneurial, media savvy and believe
in the power of storytelling.</p>
<p><i class="far fa-circle"></i> We ensure our clients get the best advice. In fact, we
insist on it. </p>
<p><i class="far fa-circle"></i> We are also completely transparent about our
methods and tend to give away all of our knowledge.</p>
</div>
</div>
</section> ```