Double Line Behind Header Stops Working When Bootstrap Applied - css

Question

The stack overflow community helped me figure out how to add two different sized lines behind my section title on my website. The method can be viewed in this JS Fiddle: http://jsfiddle.net/dCZR4/1/
It was working properly, until I included the Twitter Bootstrap 3.0 CSS in my layout. Now, the two lines appear right on top of each other, making one thick line behind the text. This can be seen here: http://onedirectionconnection.com/tester/
If anybody could advice me on what could be causing this hiccup, it would be greatly appreciated.
The CSS for the header is below:
.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;
}
And the HTML is:
<div class="section-title">Title Goes Here</div>
(In the JSFiddle, it is simply defined as h1, but I changed it in my layout)
Thanks in advance for any help offered!

Answer 1

Bootstrap applies the box-sizing: border-box by default.
You would need to reset that to box-sizing:content-box for this particular requirement.
.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;
box-sizing: content-box; /* + vendor specific versions here */
}