Почему элемент так отображается? Почему он улетел вверх из общего потока?

Question

[Lorem Ipsum]

Подскажите, пожалуйста, как решить проблему?

Скриншот:


Стили у всех элементов одинаковые, а этот как-то странно себя ведёт.

Список стилей: badge badge-dark apNo

Стили:

.apNo {
    position: relative;
    top: -3.2rem;
    left: 0.8rem;
    display: block;
    max-width: max-content;
}
.badge-dark {
    color: #fff;
    background-color: #343a40;
}
.badge {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

Comments

[MagnusDidNotBetray]

Ну раз стили у всех одинаковые, то значит этот элемент находится не в том блоке. Проверьте html

[Lorem Ipsum]

MagnusDidNotBetray, так и в HTML всё также.

[Lorem Ipsum]

MagnusDidNotBetray, А, блин. Не заметил. У него нету цифр ниже буквы.

Answer 1

[Ice]

Стили одинаковые, а контент не одинаковый
Вон у вылетающего 10 номера чего-то не хватает, а ведь это не абсолютное позиционирование .

Comments

[Lorem Ipsum]

Так и в HTML всё также.

[Lorem Ipsum]

А, блин. Не заметил. У него нету цифр ниже буквы.