Countdown plugin doesn't display properly on browser window

I am working with the countdown plug-in using the following code:

HTML

    <div class="container">
    <div class="row mb-2">
        <div class="col-md-12 text-center">
            <div id="counter" data-mdb-countdown-text-style="fs-3" class="w-25" data-mdb-countdown-label-style="fs-5">
                <div class="countdown-unit countdown-days" data-mdb-countdown-label="days"></div>
                <div class="countdown-unit countdown-hours" data-mdb-countdown-label="hours"></div>
                <div class="countdown-unit countdown-minutes" data-mdb-countdown-label="minutes"></div>
                <div class="countdown-unit countdown-seconds" data-mdb-countdown-label="seconds"></div>
            </div>
        </div>
    </div>
</div>

JavaScript

    <script>
    $(document).ready(function () {
        const counter = document.getElementById('counter');
        new Countdown(counter, {
            countdown: "31 August 2023 23:59:59",
        })
    });
</script>

CSS

#counter {
width: 60%;
font-size: 24px;

}

What I have noticed is that when I resize the browser window, the countdown plugin does not resize responsively to the new window size, as shown below.

Here is what the countdown timer looks like in a full browser window:

And here is what happens when I resize the browser window:

The rest of the page content resizes responsively as I change the browser window size, but the countdown plugin does not. The left part of the countdown is cut off.

Any explanation why this is happening?