Border to stretch 100% of the div length?

So I'm back with a question.
I'm not sure if I have done this the best way.
I tried headings (h1) but I got problems with line-breaks. It worked to add line-height:0pt; but that also removed all the line-breaks I actually wanted. After a lot of testing and head-scratching I gave up with headings.

Instead I did a span class. It works perfectly fine, BUT I want a 2px border underneath the text, and I want it to stretch 100% of the div.
This is how it looks now: http://noomirapace.org/?page_id=72
The border is just under the text, and I want it to stretch all the way to the right.

I bet this isn't the best way to make borders, so that's probably why I have this problem hehe.

CSS code
.heading {
font-size:20px;
text-shadow: 0px -1px 0px #765020;
color:#C1997B;
font-weight:bold;
border-bottom:#744f21 solid 2px;
border-bottom-width:100%;
line-height:0pt;
}

HTML code
<span class="heading"><strong>•</strong> Early Life</span>
<em>coming soon!</em>

♥

You need to make it a normal heading in order to get the line right across the page.

<h1 class="heading"> Then style the heading as before.

The underline you have is only working on the span element so where the span ends the heading ends too.

Not sure I understand your line heights, but again if you only want certain line heights to be smaller, give the <h1> tag the class.

Okay thank you!
Changed it to a heading now. But there is one thing. I centered the text giving it text-align:center; in the css. This centered the border as well.
Is it possible to just center the text, and have the border underneath?
OR is it possible to delete the border behind the text, and just have it on the sides?

Okay I'm probably making it complicated haha

If you want to not have the border centred, remove the border style from the heading, and make a new short div of 2px to get the border.

<div id="line">.</div>

#line {border: 2px solid #000;
margin: 0; padding: 0;
height: 2px;
background: #fff;
}

BUT If you have centred the text, that would not affect the heading which you have not centred.

Oh that did the job, thank you!
And it was easier to style as well :D

Okay one last thing.
Look how it is now: http://noomirapace.org/?page_id=72
Is it possible to make the line invisible under the text and the 2 dots?

Right now I have put the div like this:
<div class="line"><h1 class="heading"><strong>•</strong> Early Life <strong>•</strong></h1></div>

CSS of the div:
.heading {
font-size:20px;
text-shadow: 0px -1px 0px #765020;
color:#C1997B;
text-align:center;
font-weight:bold;
line-height:0pt;
}

.line {
margin: 0; padding: 0;
height: 2px;
background-color:#765020;
-moz-box-shadow: 0px -1px 0px #C1997B;
-webkit-box-shadow: 0px -1px 0px #C1997B;
box-shadow: 0px -1px 0px #C1997B;
}

You could not stop and start the line, without using a lot of coding I imagine, I have not done it. Bit I think you would need to end the first div. Then absolutely position another div on the line.

But if you wanted the whole line under the text, you would do a margin-top: 10px; on the line div.

Oh okay, thank you for everything! ♥