html - Bootstrap 中的边框环绕行而不是我应用边框的元素？

Question

当我为 <h3> 添加边框时标记它环绕行而不是其中的实际元素。我已尝试对 HTML 结构和 CSS 进行各种更改，但我无法找到解决方案。

这是我的 HTML:

<div class="container">
    <div class="row">
    <div class="brand col-md-5"><img src="media/img/logo.png" alt="Driven Car Sales"       class="img-rounded logo-custom"></div>
    <h3 class="phone-number col-md-7">01429 7654287</h3>
    </div>
</div>

这是我的 CSS:

.phone-number {
text-align: right;
margin-top: 2.8em;
diaplay: inline-block;
border: 1px solid orange;

如您所见，文本右对齐，因为我需要在页面右侧显示数字。

如有任何提示，我们将不胜感激。

Answer 1

差不多好了，改

diaplay: inline-block;

到

display: inline-block;