Bootstrap 5 与 col-md-5 的边距问题

Question

我正在为我的网站制作模板。我的问题是我可以用我的开发人员右侧的 flex 删除边距显示。我尝试将边距 0 添加到其中一个列。我也尝试更改 col md-4 和 3 但问题仍然存在

知道如何让我的白色 div 停在文本的末尾吗？ 我的代码片段

<div class="container-fluid block_product" style="background:#fff;width: 50%;margin-left: 60px; /* Override Bootstrap's default margin */padding: 0px; /* Override Bootstrap's default padding */">
 <div class="row" style="margin-right: 0 !important; margin-left: 0 !important;">
    <div class="col-md-4 services-products" style="padding: 0;">
       <div class="col d-flex align-items-center justify-content-center">
          <div><img class="lazyload " src="//bewens.myshopify.com/cdn/shop/files/anissa_kermiche_reine_14_karat_gold_diamond_and_pearl_earring_1_large.jpg?v=1713833565"></div>
           </div>
               </div>
                 <div class="col-md-5">
                   <div class="text-left">
                     <div class="home-section-1-product-col-2">
                          <p class="home-section-1-product-title-1">title one</p>
                               <p class="home-section-1-product-title-2">
                                   </p><p>Our devoted clients have noticed </p>
                                    </div>
                                    <div class="home-section-1-product-price">
                                        <p class="home-section-1-product-price-h2">
                                            99.00 IN
                                        </p>
                                    </div>
                                    <p class="section-1-product-strike text-center" style="margin-bottom: 0 !important;">
                                    ANKUBA-TU <strike> 130.00 IN
                                    </strike></p> 
                                    <div class="d-grid gap-2"><button class="py-md-3-custom btn btn-primary py-md-3 px-md-5 me-3 " style="margin-bottom: 10px !important;">Découvrez </button></div>
                                </div>
                            </div>
                            
                        </div>
                    </div>

Answer 1

你可以试试这个，

<div class="container-fluid block_product" style="background:#fff; width: 50%; margin-left: 10%;">
    <div class="row">
        <div class="col-md-4 services-products" style="padding: 0;">
            <div class="col d-flex align-items-center justify-content-center">
                <div>
                    <img class="lazyload" src="//bewens.myshopify.com/cdn/shop/files/anissa_kermiche_reine_14_karat_gold_diamond_and_pearl_earring_1_large.jpg?v=1713833565">
                </div>
            </div>
        </div>
        <div class="col-md-5" style="padding: 0;">
            <div class="text-left">
                <div class="home-section-1-product-col-2">
                    <p class="home-section-1-product-title-1">title one</p>
                    <p>Our devoted clients have noticed</p>
                </div>
                <div class="home-section-1-product-price">
                    <p class="home-section-1-product-price-h2">99.00 IN</p>
                </div>
                <p class="section-1-product-strike text-center" style="margin-bottom: 0 !important;">ANKUBA-TU <strike> 130.00 IN </strike></p>
                <div class="d-grid gap-2">
                    <button class="py-md-3-custom btn btn-primary py-md-3 px-md-5 me-3" style="margin-bottom: 10px !important;">Découvrez</button>
                </div>
            </div>
        </div>
    </div>
</div>