我试图实现响应卡，因为我是初学者，以网络开发，我已经失去了我的形状一些地方，在上述代码中，我的内容在卡中的小尺寸屏幕获得过流，如下所示。

#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
我期待所有的内容应该限制在所有大小的屏幕背景可以有人请驱动我得到准确的解决方案。