элементы списка попутного ветра, отбрасывающие линию

Question

У меня есть следующее HTML в моем приложении,

<div class="col-span-1 h-40 border-gray-400 border bg-white">
                    <div class="border-b border-gray-400 py-6 pl-4">
                        <h3 class="text-xl font-brand font-bold text-gray-800 text-l">Your Teams</h3>
                    </div>
                    <div class="w-full border-b border-gray-400 flex p-5 last:border-b-0 items-center">
                        <p class="text-gray-800 text-xl">Team 1</p>
                        <ul class="ml-auto">
                            <li class="border-2 border-blue-400 rounded-full inline-block">
                                <router-link to="" class="border-2 border-white rounded-full h-8 w-8 flex items-center justify-center overflow-hidden">
                                    <img src="../assets/avatar.png" class="rounded-full"/>
                                </router-link>
                            </li>
                            <li class="border-2 border-blue-400 rounded-full inline-block -ml-3">
                                <router-link to="" class="border-2 border-white rounded-full h-8 w-8 flex items-center justify-center overflow-hidden">
                                    <img src="../assets/avatar.png" class="rounded-full"/>
                                </router-link>
                            </li>
                            <li class="border-2 border-blue-400 rounded-full inline-block -ml-3">
                                <router-link to="" class="border-2 border-white rounded-full h-8 w-8 flex items-center justify-center overflow-hidden">
                                    <img src="../assets/avatar.png" class="rounded-full"/>
                                </router-link>
                            </li>
                            <li class="border-2 border-blue-400 rounded-full inline-block -ml-3">
                                <router-link to="" class="border-2 border-white rounded-full h-8 w-8 flex items-center justify-center overflow-hidden">
                                    <img src="../assets/avatar.png" class="rounded-full"/>
                                </router-link>
                            </li>
                            <li class="border-blue-400 bg-blue-400 rounded-full inline-block -ml-3">
                                <router-link to="" class="text-m rounded-full h-8 w-8 flex items-center justify-center overflow-hidden text-white">
                                    +5
                                </router-link>
                            </li>
                        </ul>
                    </div>
                </div>

Это должно привести к чему-то похожему на это,

Однако что я получаю,

Я не могу понять, почему последний элемент списка отбрасывается так, как если бы он имел верхнее поле?