How to stop overflow of card content - html

Question

I am trying to implement responsive card as i am beginner to web development i have lost my shape some where in above code my content in the card in small size screen getting over flow as shown below.
#services-card {
background-color: lightgreen;
padding: 7% 15%;
text-align: center;
font-family: "Ubuntu";
}
.card {
background-color: lightgreen !important;
}
.services-list {
text-align: left;
list-style: none;
font-size: 1.5em;
overflow: hidden;
position: absolute;
display: flex;
}
.services-cards-para {
padding-bottom: 10px;
}
.card-back {
background-color: #55F007;
width: 550px;
height: 70px;
}
.card-white {
width: 550px;
height: 70px;
}
.card-back:hover{
font-weight: bold;
color: #e60073;
box-shadow: 10px 10px 5px red;
}
.card-white:hover{
font-weight: bold;
color: #e60073;
box-shadow: 10px 10px 5px red;
}
#media(min-width: 750px) {
.card-back, .card-white {
width: auto;
font-size: 1em;
padding-bottom: 1em;
}
.inner {
height: 70%;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<section id="services-card">
<h2>Our Services</h2>
<p class="services-cards-para">Simple and affordable price plans for you.</p>
<div class="row">
<div class="col-lg-6">
<div class="card border-0">
<div class="card-body">
<ul class="services-list p-0">
<li class="pl-3 pt-2 card-back"><i class="fa-solid fa-arrow-right"></i><span class="pl-5"> GST</span></li>
<li class="pl-3 pt-2 card-white"><i class="fa-solid fa-arrow-right"></i><span class="pl-5"> Income Tax</span></li>
<li class="pl-3 card-back pt-2"><i class="fa-solid fa-arrow-right"></i><span class="pl-5"> TDS Returns</span></li>
<li class="pl-3 pt-2 card-white"><i class="fa-solid fa-arrow-right"></i><span class="pl-5"> Food License (FSSAI)</span></li>
<li class="pl-3 card-back pt-2"><i class="fa-solid fa-arrow-right"></i><span class="pl-5"> Labour License</span></li>
<li class="pl-3 pt-2 card-white"><i class="fa-solid fa-arrow-right"></i><span class="pl-5"> Trade License</span></li>
<li class="pl-3 card-back pt-2"><i class="fa-solid fa-arrow-right"></i><span class="pl-5"> Digital signature</span></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card border-0">
<div class="card-body">
<ul class="services-list p-0">
<li class="card-back pt-2 pl-3"><i class="fa-solid fa-arrow-right"></i><span class="pl-5">Import Export Code</span></li>
<li class="pl-3 pt-2 card-white"><i class="fa-solid fa-arrow-right"></i><span class="pl-5"> PAN / TAN</span></li>
<li class="pl-3 card-back pt-2"><i class="fa-solid fa-arrow-right"></i><span class="pl-5"> Firm Registration</span></li>
<li class="pl-3 pt-2 card-white"><i class="fa-solid fa-arrow-right"></i><span class="pl-5">Company / LLP Incorporation</span></li>
<li class="pl-3 card-back pt-2"><i class="fa-solid fa-arrow-right"></i><span class="pl-5"> PF & ESI</span></li>
<li class="pl-3 pt-2 card-white"><i class="fa-solid fa-arrow-right"></i><span class="pl-5"> MSME / Udyam Regn</span></li>
<li class="pl-3 pt-2 card-back"><i class="fa-solid fa-arrow-right"></i><span class="pl-5"> DIN</span></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Error image
I am expecting that all the content should limit to the background in all sizes of screen can some one please drive me to get the accurate solution.

Answer 1

from the code you sent I can guess that you are using bootstrap , you can go to this link to see how to use it: https://www.w3schools.com/bootstrap/bootstrap_grid_large.asp