Remove padding in Bootstrap Col without letting the image enlarge - css

Question

I have a col-4 | col-8 layout in Bootstrap 4 Beta 3.
The first col contains a pic, the second col should contain a pic and text aside.
At the moment I have divided the second col into another row with two cols.
I need to have these to cols stick together (e.g. class=no-gutters). But the image inside gets larger than the one in the first col as soon as I remove the gutters. I cannot remove all gutters on all three cols, as there should be a margin remaining between main col 1 and 2.
Codepen:
https://codepen.io/SchweizerSchoggi/pen/mpjgLP
<div class="container mt-3">
<div class="row">
<!-- Teaser 1 -->
<div class="col-12 col-md-4" id="teaser_Umzug">
<div class="teaser-img teaser-stick">
<img src="https://placeimg.com/640/480/tech" alt="Bild XY Company Umzug" class="img-fluid z-1 mr-1" />
<div class="teaser-overlay pt-2 pl-4 z-2">
<div class="teaser-txt">
<h2 class="mb-3"></h2>
<p class="mb-4">
<span class="bold clearfix">Settelen –</span> ist Ihr Partner<br/>für regionalen und nationalen Umzug.
</p>
<button type="button" class="teaser">Mehr erfahren</button>
</div>
</div>
</div>
</div>
<!-- Teaser 2 -->
<div class="col-12 col-md-8" id="teaser_AutoService">
<div class="row">
<!-- Teaser 2 Img -->
<div class="col-12 col-md-6 bg-box-light">
<div class="ml-0 mr-0"><img src="https://placeimg.com/640/480/tech" alt="Bild XY Company Auto und Service" class="img-fluid" /></div>
</div>
<!-- Teaser 2 Text -->
<div class="col-12 col-md-6 bg-box-light">
<div class="teaser-txt pt-4 pl-4">
<p class="mb-4">
<span class="bold clearfix">XY Company –</span> Ihr starker Partner in Sachen Auto und Service.
</p>
<button type="button" class="teaser">Services</button>
</div>
</div>
</div>
</div>
</div>

Answer 1

Well, here's a solution I came up with...
Add the pl-md-0 class to the column for the teaser 2 image. (that removes the left padding for medium screens)
Then put the contents of the first column (that includes the teaser 1 image) into a new row-column pair.
Then add the pl-md-0 class to the inner column for the teaser 1 image.
I believe this is the effect you were going for. (I didn't touch the right paddings because I thought it wasn't necessary but you certainly could remove both the left and right paddings with the px-md-0 class.)
Here's the code:
.bg-box-light {
background-color: #eee; /* TBD ! */
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="container mt-3">
<div class="row">
<!-- Teaser 1 -->
<div class="col-12 col-md-4" id="teaser_Umzug">
<div class="row">
<div class="col pl-md-0">
<div class="teaser-img teaser-stick">
<img src="https://placeimg.com/640/480/tech" alt="Bild XY Company Umzug" class="img-fluid z-1 mr-1" />
<div class="teaser-overlay pt-2 pl-4 z-2">
<div class="teaser-txt">
<h2 class="mb-3"></h2>
<p class="mb-4">
<span class="bold clearfix">Settelen –</span> ist Ihr Partner<br/>für regionalen und nationalen Umzug.
</p>
<button type="button" class="teaser">Mehr erfahren</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Teaser 2 -->
<div class="col-12 col-md-8" id="teaser_AutoService">
<div class="row">
<!-- Teaser 2 Img -->
<div class="col-12 col-md-6 pl-md-0 bg-box-light">
<div class="ml-0 mr-0"><img src="https://placeimg.com/640/480/tech" alt="Bild XY Company Auto und Service" class="img-fluid" /></div>
</div>
<!-- Teaser 2 Text -->
<div class="col-12 col-md-6 bg-box-light">
<div class="teaser-txt pt-4 pl-4">
<p class="mb-4">
<span class="bold clearfix">XY Company –</span> Ihr starker Partner in Sachen Auto und Service.
</p>
<button type="button" class="teaser">Services</button>
</div>
</div>
</div>
</div>
</div>
</div>