css - ブートストラップを適用するとヘッダーの後ろの二重線が機能しなくなる

Question

スタック オーバーフロー コミュニティは、Web サイトのセクション タイトルの後ろに 2 つの異なるサイズの行を追加する方法を理解するのに役立ちました。このメソッドは、この JS Fiddle で表示できます: http://jsfiddle.net/dCZR4/1/

レイアウトに Twitter Bootstrap 3.0 CSS を含めるまでは、正しく動作していました。これで、2 つの線が重なり合って表示され、テキストの後ろに 1 本の太い線が作成されます。これはここで見ることができます: http://onedirectionconnection.com/tester/

このしゃっくりの原因について誰かが私にアドバイスできるなら、それは大歓迎です.

ヘッダーの CSS は次のとおりです。

.section-title{
    font-family: 'Lato', 'Asap','Quicksand', 'Droid Sans', sans-serif;
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-transform: uppercase;
    text-align: center;
}

.section-title:before, .section-title:after {
    position: absolute;
    top: 40%;
    overflow: hidden;
    width: 50%;
    height: 4px;
    content: '\a0';
    border-bottom: 3px solid #DA5969;
    border-top: 1px solid #DA5969;
}
.section-title:before {
    margin-left: -52%;
    text-align: right;
}
.section-title:after {
    margin-left:2%;
    text-align:left;
}

HTMLは次のとおりです。

<div class="section-title">Title Goes Here</div>

(JSFiddle では単純に h1 と定義されていますが、レイアウトで変更しました)

提供されたヘルプに事前に感謝します!