How can I get text to overlay over an image?

Question

I cannot seem to get the text shown to overlay over the image. I have tested snippits of the code in codepen and can get the desired effect there.

HTML:

   <div class="container-fluid">
    <div class="row">
        <div class="banner">
            <img src="https://imageshack.com/a/img923/9364/qvCJa4.png" pagespeed_url_hash="616443323" onload="pagespeed.CriticalImages.checkImageForCriticality(this);" />

            <div class="container-fluid purchaceNowOverlayText">
                <div class="row">
                    <div class=" col-sm-1">
                        <hr>
                    </div>
                    <div class="col-sm-11">
                        <h2>Are you Ready? <b>Purchace Here!</b></h2>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12 col-md-6 col-lg-6 headerRow">
                        <img src="images/3bottlesdone.png" width="400px" height="300px">
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6 headerRow">
                        <p>This text should overlay over the bg image This text should overlay over the bg image This text should overlay over the bg image This text should overlay over the bg image This text should overlay over the bg image This text should overlay over the bg image This text should overlay over the bg image This text should overlay over the bg image This text should overlay over the bg image </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

.banner{ position:relative; width:90%; margin:0 auto; }  
.banner img{width:100%;}
.purchaceNowOverlayext{position:absolute; top:50%; color: white;}

Answer 1

typo. Your CSS class lacks a T on purchaceNowOverlayText