Text coming out of the card and overlay the image - html

Question

I developed a bootstrap card, inside that bootstrap card I am putting another one.
My problem is that when I reduce the screen size the text comes out of the card and also overlays the image, how can I solve this?
Demo
code
<div class="card-deck cardsZone">
<div class="card myCards">
<div class="card-body">
<div *ngFor="let pr of ProgressDashTasks">
<div class="card mysmallCcards">
<div class="card-body">
<div class="row">
<div class="col-sm-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgDash">
</div>
<div class="col-sm-8">
<span class="brandName">MY PERCENTAGE</span>
<p class="subtitledash">New percentage</p>
</div>
</div>
<hr class="solid">
<div class="row">
<div class="col-xs-6">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgusersDash">
</div>
<div class="col-xs-6">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgusersDash">
</div>
<div class="col-xs-6">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgusersDash">
</div>
</div>
Card link
Another link
</div>
</div>
</div>
</div>
</div>
</div>
Image Problem

Answer 1

On .cardsZone you have to use a relative width and not an absolute one. Use width: fit-content:
.cardsZone{
margin-top: 5%;
width: fit-content;
height: 70%;
margin-right: auto;
margin-left: auto;
}
.myCards{
background: #E7EAF180 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 20px #BCBCCB47;
border-radius: 8px;
border: none;
}
.card-deck .card {
margin-left: 0px;
}
.mysmallCcards{
width: 100%;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 20px #BCBCCB47;
border-radius: 8px;
border: none;
margin-top: 20px;
}
.card-header:first-child {
border-radius: calc(9px - 1px) calc(9px - 1px) 0 0;
}
.mycardHeader{
background-color: white;
}
.imgDash{
width: 40px;
height: 40px;
border-radius: 8px;
}
.brandName{
text-align: left;
font-family: 'Noto Sans', sans-serif;
font-size: 22px;
letter-spacing: 0;
color: #4D4F5C;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 0px;
font-weight: re;
}
.subtitledash{
text-align: left;
font-family: 'Noto Sans', sans-serif;
font-size: 13px;
font-weight: bold;;
letter-spacing: 0;
color: #4D4F5C;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.imgusersDash{
width: 24px;
height: 24px;
transform: matrix(1, 0, 0, 1, 0, 0);
border-radius: 8px;
margin-left: 15px;
}
hr.solid {
border-top: 1px solid #999;
width:100%
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="card-deck cardsZone">
<div class="card myCards">
<div class="card-body">
<div *ngFor="let pr of ProgressDashTasks">
<div class="card mysmallCcards">
<div class="card-body">
<div class="row">
<div class="col-sm-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgDash">
</div>
<div class="col-sm-8">
<span class="brandName">MY PERCENTAGE</span>
<p class="subtitledash">New percentage</p>
</div>
</div>
<hr class="solid">
<div class="row">
<div class="col-xs-6">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgusersDash">
</div>
<div class="col-xs-6">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgusersDash">
</div>
<div class="col-xs-6">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Circle-icons-tools.svg/1024px-Circle-icons-tools.svg.png" class="img-responsive imgusersDash">
</div>
</div>
Card link
Another link
</div>
</div>
</div>
</div>
</div>
</div>