Bootstarp/CSS Pop-up is changing my body's padding-right

Question

This is my body padding

<div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModal2Label" aria-hidden="true" style="padding:0;">
    <div class="modal-dialog modal-lg">
                <div class="modal-content" >
            <div class="modal-header">
                <label class="modal-title" id="exampleModal2Label" style="font-weight: 700">Cancel An Order</label>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" >
                <panel ID="Panel1" >
                    <label class="form-label">Are you sure you want to cancel this order?</label>
                    <div>
                        <button type="button" class="btn btn-outline-danger btn-lg" data-bs-dismiss="modal" style="margin-top: 10px;font-size:x-small;border: none;color: black;">Close</button>
                        <button ID="btn_confirmCancel" class="btn btn-outline-primary btn-lg" data-bs-dismiss="modal" style="margin-top: 10px;font-size:x-small;margin-right: 30px;border: none;color: #14a2ad;" @onclick="cancelOrder">Confirm</button>
                    </div>
                </panel>
            </div>
        </div>
    </div>
</div>

this is my code.

and after I click this pop-up

My body padding-right is changing

how can I solve this

Answer 1

my first answer here. I can give you some advices:

-try F12 and click on the blank part of padding and see what is causing this padding.

-try setting body padding to 0 or auto.

-try to set the div padding to auto.

let me know if this helps you