Border-Radius & Overflow: Hidden - css

Question

I seem to be having a weird problem when using border-radius and overflow: hidden together, please see the picture for my problem.
As you can see in the bottom right the image doesn't expand to the very edge of the div and a little curve is visible, any help will be much appreciated.
I also have a live version here, problem can be seen near the bottom of the page: http://hasky.infinityfreeapp.com/
Image
.content__card {
position: relative;
margin: 1em 0;
width: 80em;
max-width: 80%;
min-height: 35em;
border-radius: 0.8em;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
overflow: hidden;
border: none;
}
.content__card .info {
text-align: left;
margin: 1.5em 3em;
height: auto;
}
.content__card .info h2 {
font-family: "DemiBold", sans-serif;
}
.content__card .info p {
font-size: clamp(1rem, 2vw, 1.4rem);
font-family: "Medium", sans-serif;
margin: 1.5em 0;
}
.content__card a {
position: absolute;
bottom: 2em;
border-radius: 0.8em;
background: #fff;
color: #111;
text-decoration: none;
font-weight: 700;
z-index: 3;
padding: 0.6em 1.8em;
font-size: clamp(1rem, 3vw, 1.4rem);
font-family: "Medium", sans-serif;
}
.content__card img {
position: absolute;
right: 0;
bottom: 0;
width: 30em;
}
.content__card__three {
background: #7D44FD;
color: #fff;
}
<div class="content__card content__card__three span-2">
<div class="info">
<h2>Sekite mūsu</h2>
<h2>Youtube kanalą!</h2>
Youtube
</div>
<img src="https://i.imgur.com/5ZXj6fP.png">
</div>

Answer 1

I'm not sure what your problem is exactly, but this is the solution I can provide depending on what I understood.
added the basic styling and also remove some unnecessary code.
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: #000;
}
.content__card {
position: relative;
margin: 1em 0;
max-width: 90%;
min-height: 35em;
border-radius: 0.8em;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
overflow: hidden;
}
.content__card .info {
text-align: left;
margin: 1.5em 3em;
width: 20rem;
}
.content__card .info h2 {
font-family: "DemiBold", sans-serif;
}
.content__card .info p {
font-size: clamp(1rem, 2vw, 1.4rem);
font-family: "Medium", sans-serif;
margin: 1.5em 0;
}
.content__card a {
position: absolute;
bottom: 2em;
border-radius: 0.8em;
background: #fff;
color: #111;
text-decoration: none;
font-weight: 700;
z-index: 3;
padding: 0.6em 1.8em;
font-size: clamp(1rem, 3vw, 1.4rem);
font-family: "Medium", sans-serif;
}
.content__card img {
position: absolute;
right: 0;
bottom: 0;
width: 30em;
}
.content__card__three {
background: #7d44fd;
color: #fff;
}
<div class="content__card content__card__three span-2">
<div class="info">
<h2>Sekite mūsu</h2>
<h2>Youtube kanalą!</h2>
Youtube
</div>
<img src="https://i.imgur.com/5ZXj6fP.png">
</div>