How to remove extra space inside the bootstrap row

Question

I want ro remove this extra space i am using bootstrap 5 version i tried bootstrap classes like pr-0,mr-0,p-auto,m-auto but there but there were no changes. then i tried css margin-right:0; this is also didn't work

i added some background colors to find column boarders.

 <div class="row"> <div class="col-md-10 bg-info"> <div class="row mt-3 "> <div class=" col-md-6 bg-success mr-auto"> <label for="">വഴിപാട്</label> <select name="vazhipad" id="vazhipad" class=" form-control"> <option value="">പുഷ്പാജ്ഞലി</option> <option value="">അർച്ചന</option> <option value="">കൂവളമാല</option> <option value="">രക്തപുഷ്പാജ്ഞലി</option> </select> </div> <div class="col-md-2 bg-warning"> <label for="">എണ്ണം</label> <input type="number" name="ennam" id="ennam" class=" form-control" disabled value="1"> </div> <div class=" col-md-3 bg-primary mr-0"> <label for="">തുക</label> <input type="number" name="thuka-table" id="thuka-table" class=" form-control " disabled> </div> </div> <div class="row mt-3 "> <div class=" col-md-6"> {{-- <label for="">വഴിപാട്</label> --}} <select name="vazhipad" id="vazhipad" class=" form-control"> <option value="">പുഷ്പാജ്ഞലി</option> <option value="">അർച്ചന</option> <option value="">കൂവളമാല</option> <option value="">രക്തപുഷ്പാജ്ഞലി</option> </select> </div> <div class="col-md-1"> <input type="number" name="ennam" id="ennam" class=" form-control" disabled value="1"> </div> <div class=" col-md-2"> {{-- <label for="">തുക</label> --}} <input type="number" name="thuka-table" id="thuka-table" class=" form-control " disabled> </div> </div> <div class="row mt-3 "> <div class=" col-md-6"> {{-- <label for="">വഴിപാട്</label> --}} <select name="vazhipad" id="vazhipad" class=" form-control"> <option value="">പുഷ്പാജ്ഞലി</option> <option value="">അർച്ചന</option> <option value="">കൂവളമാല</option> <option value="">രക്തപുഷ്പാജ്ഞലി</option> </select> </div> <div class="col-md-1"> <input type="number" name="ennam" id="ennam" class=" form-control" disabled value="1"> </div> <div class=" col-md-2"> {{-- <label for="">തുക</label> --}} <input type="number" name="thuka-table" id="thuka-table" class=" form-control " disabled> </div> </div> </div> </div>

Answer 1

I suggest you increase the second column to col-md-3

<div class="col-md-3 bg-warning">

also you can offsetting column

<div class="col-md-2 bg-warning offset-md-1">

Read more about offsetting columns here