I created a custom Bootstrap 5.2.0 breadcrumb, but when I add one or more breadcrumb’s item the right arrow is before the end of breadcrumb’s item box

I have created a fiddle, so I can show you the possible error

<div class="page-content page-container" id="page-content">
    <div class="padding">
        <div class="row container">
            <div class="col-md-12">
                    <nav aria-label="breadcrumb">
                      <ol class="breadcrumb breadcrumb-custom">
                        <li class="breadcrumb-item"><a href="#" data-abc="true">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page"><span>Portfolio</span></li>
                      </ol>
                    </nav>
                    <nav aria-label="breadcrumb">
                      <ol class="breadcrumb breadcrumb-custom">
                        <li class="breadcrumb-item"><a href="#" data-abc="true">Home</a></li>
                        <li class="breadcrumb-item"><a href="#" data-abc="true">prova</a></li>
                        <li class="breadcrumb-item active" aria-current="page"><span>user</span></li>
                      </ol>
                    </nav>
                    <nav aria-label="breadcrumb">
                      <ol class="breadcrumb breadcrumb-custom">
                        <li class="breadcrumb-item"><a href="#" data-abc="true">Home</a></li>
                        <li class="breadcrumb-item"><a href="#" data-abc="true">Portfolio</a></li>
                        <li class="breadcrumb-item"><a href="#" data-abc="true">Eventi</a></li>
                        <li class="breadcrumb-item active" aria-current="page"><span>Santa Pasqua 2024</span></li>
                      </ol>
                    </nav>
                  </div>
                </div>
              </div>
            </div>

Custom Bootstrap 5.2.0 breadcrumb