Image should not use full-width in element - html

Question

At the moment I am trying to program the wireframe I have made, but experience some problems with specially the left side of the element:
The problem is that the 200x200px image is going full width in the left column. Therefore I cannot center the image.
I can see it can be changed with overwriting the following CSS, and set the width to none;.
.cms-area img {
width: 100%;
}
But as I see it will break the reponsive on the images?
Can anybody help me in goal here?
See the [Testpage here][2].
The site is still using Bootstrap 3, and I do not have access to change the main CSS. Therefore I need to overwrite CSS if I need that.
Best regards
<style>
#front .row {
padding-bottom: 0px;
}
.row [class*="col-"] {
padding-right: 7.5px;
padding-left: 7.5px;
}
.padding-white-bg {
padding: 15px;
background-color: #fff;
margin-bottom:30px;
border: 1px solid #ebecf0;
}
.padding-twocolumn-bg {
margin-bottom:30px;
}
.padding-grey-bg {
padding: 7.5px;
}
.padding-white-border {
border: 1px solid #ebecf0;
}
.top-pad-d {
padding-top: 15px;
}
.sbp-2-column {
background-color:#fff;
padding-top:15px;
padding-bottom:15px;
border:1px solid #ebecf0;
}
/********************************/
/* Product styling */
/********************************/
/* Make spot image go full width */
.cms-area .result-cols ul.items li.add-item {
width: 100% !important;
}
.cms-area .result-cols ul.items li.add-item .item {
padding: 0px;
}
/* Remove add to basket button */
.cms-area .result-cols ul.items li.add-item a.button-add {
display:none;
}
/* Set height on product description */
.cms-area .result-cols ul.items li.add-item .desc {
height: 0px;
overflow: visible;
}
/* Remove fade on product headline */
.cms-area .result-cols ul.items li.add-item .desc:after {
background: none;
}
.cms-area .result-cols .more-wrap {
padding-bottom: 0px;
}
/* Remove Sub-heading */
.desc2{
display:none;
}
/* Remove product text */
.ext-description {
display:none;
}
/* Remove padding multiple products on row */
.cms-area .result-cols {
padding:0px;
}
/********************************/
/* Custom Buttons */
/********************************/
.btn.btn-lg {padding: 10px 40px;}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
color: #f5f5f5;
background-color: #1abc9c;
border-color: #1abc9c;
outline: none;
margin: 20px auto;
}
/********************************/
/* Media Queries */
/********************************/
#media screen and (min-width: 980px){
.hero { width: 980px; }
}
#media screen and (max-width: 640px){
.hero h1 { font-size: 4em; }
}
#media screen and (max-width: 896px){
.top-pad-m {
padding-top: 15px;
}
}
#media only screen and (max-width: 1280px) {
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
height: 60vh;
}
}
/********************************/
/* Overall Styling */
/********************************/
#sbp-hr {
margin-top:10px !important;
margin-bottom:10px !important;
}
.sbp-align {
text-align: left;
padding-left:10px;
}
.test {
padding:20px 20px 20px 20px;
}
/* TEST on 2 column */
.classWithPad { margin:8px; padding:10px; background-color: #fff; border:1px solid #ebecf0;}
.cms-area img {
max-width: 100%;
}
</style>
<div class="wrapper">
<!-- Section 7 -->
<div class="section padding-twocolumn-bg">
<div class="row">
<div class="text-center col-md-6">
<div class="classWithPad">
<p style="padding:75px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a><img src="https://placehold.it/200x200" class="img-responsive test"></a>
</div>
</div>
<div class="text-center col-md-6">
<div class="classWithPad">
<div class="row">
<div class="col-sm-12">
<h3 class="sbp-align">Headline</h3>
<hr>
</div>
<div class="col-sm-6">
<img src="https://placehold.it/250x150" style="padding:10px;">
<h4 class="sbp-align">Subline</h4>
<p class="sbp-align">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr id="sbp-hr">
Read more
</div>
<div class="col-sm-6">
<img src="https://placehold.it/250x150" style="padding:10px;">
<h4 class="sbp-align">Subline</h4>
<p class="sbp-align">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr id="sbp-hr">
Read more
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

If you make width=200px to the left column the uploaded image will always be at center and there are lots of padding you are using for centering the images, you can use various classes of bootstrap for that!
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container-fluid">
<!-- Section 7 -->
<div class="section padding-two column-bg">
<div class="row align-items-center">
<div class="text-center col-md-6 col-12">
<div class="classWithPad">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a><img src="https://placehold.it/200x200" width="200px"></a>
</div>
</div>
<div class="text-center col-md-6">
<div class="classWithPad">
<div class="row p-3">
<div class="col-sm-12">
<h3 class="sbp-align">Headline</h3>
<hr>
</div>
<div class="col-sm-6">
<img src="https://placehold.it/250x150" width="100%" class="pb-2">
<h4 class="sbp-align pb-2">Subline</h4>
<p class="sbp-align">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr id="sbp-hr">
Read more
</div>
<div class="col-sm-6">
<img src="https://placehold.it/250x150" width="100%" class="pb-2">
<h4 class="sbp-align">Subline</h4>
<p class="sbp-align">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr id="sbp-hr">
Read more
</div>
</div>
</div>
</div>
</div>
</div>
</div>