How do I adjust the off canvas menu to the left in bootstrap extension?

See more:

bootstrap

Bootstrap Extension documentation does not specify the Off Canvas Menu left alignment. Can it be solved simply or need to change the js file?

What I have tried:

<div class="offcanvas-main">
    <div class="offcanvas-container">
        <div class="navbar navbar-dark bg-dark sticky-top">
            <a class="navbar-brand" href="#">Off Canvas Menu</a>
            <button class="offcanvas-toggler" type="button">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
        <div class="container-fluid">
            <h2 id="menu1">Menu 1</h2>
            <p>...</p>
            <h2 id="menu2">Menu 2</h2>
            <p>...</p>
            <h2 id="menu3">Menu 3</h2>
            <p>...</p>
            <h2 id="menu4">Menu 4</h2>
            <p>...</p>
        </div>
    </div>
    <div class="offcanvas-menu bg-danger text-light">
        <div class="navbar navbar-dark bg-danger">
            <a class="navbar-brand" href="#">Off Canvas Menu</a>
            <button class="offcanvas-toggler" type="button">
                <span class="text-light display-7">×</span>
            </button>
        </div>
        <div class="container-fluid">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link text-light rolling" href="#menu1">Menu 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-light rolling" href="#menu2">Menu 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-light rolling" href="#menu3">Menu 3</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-light rolling" href="#menu4">Menu 4</a>
                </li>
            </ul>
        </div>
    </div>
</div>