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;

Answer 2

用類col-md-7的div包裹h3 。

col-md-7類用於一列，並且在大多數情況下，您實際上並沒有將其直接應用於標題標頭之類的元素。