Круглые уведомления превращаются в таблетки шириной 30px в другой контейнер

Question

У меня есть боковая навигация, где есть уведомления, и у меня проблема в том, что один круг уведомлений - это круг, а одно уведомление - это таблетка шириной 30 пикселей.CSS почти одинаков между двумя, единственная разница - абсолютное и статическое позиционирование, но я изменил позиционирование, и проблема все еще существует.Прикрепленное изображение проблемы:

Таким образом, очевидно, что рядом с моим именем указан правильный, а рядом с выбором "Уведомления" - неправильный.Вот CSS для того, что рядом с моим именем:

.notification {

    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $main-red;
    min-width: 14px;
    height: 14px;
    border-radius: 25px;
    color: #fff;
    font-size: 10px;
    position: absolute;
    padding: 0 2px;
    left: 13px;
    top: 78px;

}

А вот CSS для того, что рядом со словом "Уведомления"

.notification {

    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $main-red;
    min-width: 14px;
    height: 14px;
    border-radius: 25px;
    color: #fff;
    font-size: 10px;
    position: absolute;
    padding: 0 2px;
    left: 13px;
    top: 78px;

}

.notification.in-bar {
    position: static;
    margin-left: 5px;
    left: auto;
    top: auto;
}

ИВот HTML-код для картинки:

<div class="profile">

    <div class="person">

        <div class="notification over-picture">0</div>
        <img src="/assets/icons/profile.svg" alt="A profile icon or picture" title="Profile" class="profile-picture">

        <div class="details">

            <span class="name"><?=$extra_html['full_name']?></span>
            <span class="status <?=$extra_html['current_status']['class']?>"><?=$extra_html['current_status']['title']?></span>

        </div>

    </div>

    <div class="options">

        <img src="/assets/icons/profile-more.svg" alt="A small icon with three dots" title="More" class="more">

        <div class="shadowbox">

            <span class="status-selection selection">Set Availability Status</span>

            <div class="available-options">

                <?php 
                    foreach($extra_html['status'] as $agent_status) {
                        echo "<span class='selection $agent_status[class]' onclick='changeCurrentAgentStatus(`$agent_status[title]`, `$agent_status[class]`)'>$agent_status[title]</span>";
                    }
                ?>

            </div>

            <hr>

            <div class="status-selection selection">Notifications <span class="notification in-bar">0</span></div>

            <hr>

            <a class="selection" title="Go to your Account Preferences, <?=$extra_html[first_name]?>" href="/preferences/">Account Preferences</a>
            <a class="selection" title="Log out" href="/logout/">Log Out</a>

        </div>

    </div>

</div>

В чем разница, которая расширяет уведомление как таблетка?

Answer 1

В вашем классе просто добавьте свойство,

.notification {
 width:14px;
}

PS: я не вижу использования 'min-width'. Так что вы можете просто заменить его на ширину.