Css 徽章在列表中的位置，宽度：49%

我有一个选项卡，如下图所示。

这里的问题是，警钟的徽章不在正确的位置，我无法理解这一点

<ul class="nav nav-tabs ">
    <li class="active" id="received_fs_li" style="width: 49%;">
        <a  id="received_fs_link" class="text-center" href="#" data-toggle="tab">
            <i class="fa fa-arrow-up" aria-hidden="true"></i></a>
    </li>
    <li id="sent_fs_li" style="width: 49%;">
        <a id="sent_fs_link" class="text-center" href="#" data-toggle="tab">
        <i class="fa fa-bell" aria-hidden="true"></i></a>
            <span class="badge" id="badge-new-friendship">1</span>
                                                                
    </li>
</ul>

但对我来说，问题来自

宽度：49%因为如果我删除它，徽章看起来不错，但它看起来并不漂亮，因为列表没有占据整个宽度。。。
谢谢
首先，徽章在另一个元素中用作
，例如：

<a href="#">Inbox <span class="badge">42</span></a>





首先，徽章用作另一个元素内的
，例如：

<a href="#">Inbox <span class="badge">42</span></a>





谢谢您的回答。问题是，我不想要文本，只想要带徽章的居中钟形图标：/Thank，谢谢你的回答。问题是我不想要文本，只想要带徽章的居中钟形图标：/