border-bottomがはみ出してしまう

Question

bootstrap-3.3.7を使用してホームページ作成を行っております。

その際に<h3>で囲ったテキストはpaddingが効いているのですが、

border-bottomその<h3>に適用しているborder-bottomがpaddingが

適用されずはみ出してしまいます。

下記がそのコードとなります。

<div id="home_wrap">
    <div class="container all">
        <div class="row o-3column">
            <div class="contents_left col-md-9">
                <div class="post_title_wrap row">
                    <h3 class="post_title col-md-12">
                        <a href="/">テキスト</a>
                    </h3>
                </div>
               <div class="post_content_wrap row">
                   <div class="post_left col-md-3">写真</div>
                   <div class="post_right col-md-9">
                       <p class="postcat">
                           <a href="">テキスト</a>
                       </p>
                       <p class="post_content">テキスト</p>
                       <p class="postinfo">テキスト</p>
                   </div>
              </div>
            </div>
            <div class="contents_right col-md-3">
                <aside id="sidebar"></aside>
            </div>
        </div>
    </div>
</div>

上記の<h3 class="post_title col-md-12">に

.post_title {
    border-bottom: 0.5px solid #ccc;
    color: #ccc;
    font-size: 24px;
    margin-bottom: 10px;
    margin-top: 0;
    padding-bottom: 10px;
}

を適用しているのですが、
border-bottomがはみ出します。

どうすればよろしいでしょうか？

Comments

[toutou]

divの数が19個なんですが関係あります？

[imac]

すいません。<aside id="sidebar">の横の</div>は間違いでした。

Answer 1

解決しました！

<h3 class="post_title col-md-12">ではなく、 <div class="col-md-12"> <h3 class="post_title"></h3> </div> としたところ、paddingが適用されました。

インライン要素だったから、paddingが適用されなかったのかな？

無事解決しました。
回答して頂いた皆様ありがとうございました。

Comments

[toutou]

言ってることがよくわからなかったけどインラインならこれ
http://markup.webcrew.co.jp/art_20141023.html

[imac]

ありがとうございます！

Answer 2

リンク内容
適用されてるように見える。

Comments

[imac]

すいません。
確認したのですが、やはりborder-bottomだけpaddingが適用されません。。。