为什么包装文本被1个空格关闭？

Question

我在Bootstrap 3中使用了一个居中的导航栏品牌，当在手机大小的屏幕上观看时，文字包裹，但顶线有一个前导空间，而底部没有，导致它们存在错位的。

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="index.html" id="title-card">Testing Testing</a>
        </div>
    </div>
</nav>

在这个例子中，＆＃34;标题卡＆＃34;将font-size设置为2em; navbar-brand和navbar-header被修改为：

.navbar-header {
    float: left;
    padding: 15px;
    text-align: center;
    width: 100%;
}

.navbar-brand {
    float: none;
}

这会产生以下输出：

如何对齐它们？

Answer 1

向margin:0提供padding:0和#title-card。

#title-card {
margin: 0; 
padding: 0;
}