Css z-index not working correctly with bootstrap - css

Question

I have a block of code that is solid. Works fine. Except for the footer of my site. No idea why but the heading bars are not showing for the footer but they are everywhere else?
here is a pen of the working code
http://codepen.io/VincentStephens/pen/EjyJKP
Here is a screenshot of the not working site:
https://www.dropbox.com/s/y3oxrvzvdvyaai6/Screen%20Shot%202015-05-19%20at%2019.07.47.png?dl=0
This works by creating a :before element. Putting the menu text into a span, then using z-index to position the span on top of the :before.
You can see the element there (see photo), everything is the same but just won't show unless I change the z-index to 0 or higher but then the line is above the heading text in the span???
h1.heading {
color: $light-gold;
text-transform: uppercase;
font-size: 32px;
font-weight: 300;
line-height: 40px;
font-family: SourceSansPro;
span {
background-color: $golden-black;
display: inline-block;
z-index: 1;
padding-right: 10px;
}
}
h1.heading:before {
content: "";
background-color: $light-gold;
display: block;
position: relative;
top: 23px;
width: 100%;
height: 6px;
z-index: -1;
}
HTML - working
<h1 class="heading"><span>The Team</span></h1>
HTML - Footer, not working
<div class="fluid-container footer">
<footer class="container">
<div class="col-lg-4">
<h1 class="heading"><span>About</span></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bestiarum vero nullum iudicium puto. Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit. Quae sunt igitur communia vobis cum antiquis, iis sic utamur quasi concessis; De illis, cum volemus. Duo Reges: constructio interrete. Huic mori optimum esse propter desperationem sapientiae, illi propter spem vivere.</p>
</div>
<div class="col-lg-4">
<h1 class="heading"><span>Address</span></h1>
<p class="address">
address<br>
</p>
<p class="address">
Tell: 0207 374 6141 <br>
Email: enquiries#company.com
</p>
</div>
<div class="col-lg-4">
<h1 class="heading"><span>Connect</span></h1>
<img src="img/social-media.png" width="186" height="46">
<h1>Payment Options</h1>
<img src="img/payment-cards.png" width="267" height="56">
</div>
</footer>
</div>

Answer 1

Thanks for the moment on sanity.... it was indeed a position issue.
The footer also has a background colour. so that entire element needed to have a position: relative; and z-index: -1; added to it.
full code for anyone else in same situation:
SCSS - wil need compiling
.fluid-container.footer {
position: relative;
z-index: -1;
background-color: $light-golden-black;
footer {
h1.heading {
color: $light-gold;
text-transform: uppercase;
font-size: 32px;
font-weight: 300;
line-height: 40px;
font-family: SourceSansPro;
position: relative;
span {
background-color: $light-golden-black;
display: inline-block;
z-index: 1;
padding-right: 10px;
position: relative;
}
}
h1.heading:before {
content: "";
background-color: $light-gold;
display: block;
position: absolute;
top: 23px;
width: 100%;
height: 6px;
z-index: -1;
}
}
}