How to align buttons that lose position & proportion when changing size of the window

See more:

CSS

HTML5

bootstrap

As the title says, i'm building a website that is a product add / product list, etc...
thing is, when the screen is fully open, buttons are well placed and well positioned, everything OK.
but when i change the size of the window, they get all over the place, they change their size, they lose proportion, and everything.

I wanted to leave a photo here to show but I don't know how to post photos here, maybe it's not possible.. the other day i posted a link to a photo but people got offended and said they wouldn't click the link. anyways.. I'll leave the code below, im using bootstrap 5 (cdn)

Thanks and I appreciate any help given.

<div class="container">
        <div class="row mt-5">
            <div class="col-8">
                <h1>Product List</h1>
            </div>
            <div class="col-1 mt-2">
                <button onclick="window.location.href='add.php'" class="btn btn-primary">ADD</button>
            </div>
            <div class="col-3 mt-2">
                <button name="delete" class="btn btn-danger" id="delete-product-btn" form="form">MASS DELETE</button>
            </div>
        </div>

What I have tried:

Googled and searched on youtube, but can't find the fix for my issue.