The Slim Navbar makes the main element get an additional padding of it's width:

Check the slim example here:

https://mdbootstrap.com/docs/standard/navigation/sidenav/

If the sidebar is open, the content div gets a padding of 260 px (which on the page makes it appear to the right.

<div style="padding: 20px 20px 20px 260px; margin-right: 0px; transition: all 0s ease 0s;" class="text-center" id="slim-content">
        <button data-mdb-toggle="sidenav" data-mdb-target="#sidenav-4" class="btn btn-primary" aria-controls="#sidenav-4" aria-haspopup="true" style="" aria-expanded="true">
          <i class="fas fa-bars"></i>
        </button>
        <button id="slim-toggler" class="btn btn-primary" style="">Toggle slim</button>
        <div class="d-flex justify-content-center my-5"></div>
      </div>

Why is that this way?