How can I have a fixed div at bottom with margin to show information?

I have a "classic" html5 page that consist of a header, several sections and a footer:

<html>

<header>
...
</header>

<section>
...
</section>

<section>
...
</section>

<footer>
...
</footer>

</html>

And I need to create a div that will show information -like server responses- for some seconds fixed at the bottom right with some margins like it can be seen in the image below:

For that I created the following HTML + CSS for that container that I've inserted at the bottom of the HTML:

html:

<div id="divInfoContainer" class="divInfoContainer divInfoContainerNoErrors">
    <div id="divInfoAnimated" class="divInfoAnimated">
        <img src="~/Content/loading.gif" alt="Loading..." />
    </div>
    <div id="divInfoText" class="divInfoText">
    </div>
</div>

css:

.divInfoContainer {
    position: fixed;
    bottom: 60px;
    right: 30px;
    width: auto;
    padding: 15px;
    border-radius: 10px;
    font-weight: bold;
    visibility: hidden;
}

.divInfoContainerInfo {
    background-color: #2E64FE;
    color: #ffffff;
}

.divInfoContainerErrors {
    background-color: #FF0000;
    color: #ffffff;
}

.divInfoContainerSuccess {
    background-color: #0B610B;
    color: #ffffff;
}

And it's working quite well, as it can be seen in the attached screenshot, but the problem is that it is not being very responsive, as in a tablet it loses its right margin, as it can be seen in the second attachment.

The fact is not only I'd like to fix the right margin issue, but also create a fully responsive solution with Bootstrap 5 which always creates a fixed div with the same bottom/right margin independently of the screen, but for the moment, and after several attempts, I was not able to achieve that.

What can I try next?

Solution

At the moment of writing the question I completely forgot that toasts already exists in Bootstrap, so, as @SubCore suggested I've read the documentation and implemented a toast with no problems at all.