Module showing different font colour on webpage to module preview

[SJackson1]

I have been making a module that allows me to overlay text on an image on our website. 

It looks fine in the module preview section and all seems to operate correctly with white text over the background colour: 

However when I try and use it on the webpage I'm building, the H1 text is still coming up as black: 

Any ideas where I could have gone wrong? I'm fairly new to this so I don't have any idea what's causing this problem! 

This is the code I've used for the module: 

<div class='banner-image' style="background-image:url('{{ module.banner_image.src }}')">
<div class='banner-text-area'>
<h1> {{ module.h1 }}</h1>
<h1> {{ module.h1_pt_2 }} </h1>
<p> {{ module.h2 }} </p>
</div>
</div>

.banner-image {

background-repeat: no-repeat;

background-size: cover;

background-position: 50% 50%;

position: relative;

width: 100%;

height: 400px;

display: block;

background-color: #007db9

}

.banner-text-area {
padding: 70px 0px 0px 20px;
color: #fff;
line-height: 0.5;
font-size: 25px;
}

.banner-text-area p {
width: 40%;
line-height: 1;
}

.banner-text-area h1 {
text-align: left;
font-size: 60px;
}
/* .banner-text-area h1 {
color: #fff;
text-align: center;
font-size: 40px;
} */
/* .banner-text-area h2 {
color: #fff;
text-align: center;
font-size: 30px;
} */

@media(max-width: 767px) {
.banner-image{
height: 300px;
}
.banner-text-area h1 {
font-size: 40px;
}
/* .banner-text-area h2 {
font-size: 20px;
} */
}

[ashleyidesign · Accepted solution]

Hey,

It looks like you have the color styling commented out for the H1 itself and only have a color stated for the containing div, which means if there's a color specified for H1s on the page or template level, then it'll get overwritten.

You have it correct in the commented-out section where it says: /* .banner-text-area h1

Add color styling to .banner-text-area h1 and that should fix the issue.