user2109949 user2109949 - 1 month ago 6
CSS Question

Having troubles targeting an h1 inside a div

I have this part on my index.html page

<!-- Top of the Page -->
<div id="home" class="container header">
<div class="row">
<div class="image-header margin-0">
<div class="overlay"></div>
<div class="headertext">
<h1>EXAMPLE</h1>
</div>
</div>
</div>
</div>


I am trying to target the word 'EXAMPLE' in my main.css, but I am having troubles with it. Whatever I try, it seems to target the parent divs or not target it at all.

I have tried targeting:
.headertext .h1
.headertext h1
p h1

I basically tried every combination, but I can't achieve the effect I desire.

My goal is to have an image, then a black overlay with opacity on top of the image and then some text in the center of the page.

Thanks everyone!

edit: removed p tags around h1

edit2: I actually figured it out. There was margin-top added automatically to the h1. I am guessing it's a default in bootstrap? I set margin-top to 0 and it's working fine now. Thanks!

Answer

You can't have a h1 in p , It is a invalid HTML.

Please try something like below.

.headertext h1 {
  color: green;
}
<div id="home" class="container header">
  <div class="row">
    <div class="image-header margin-0">
      <div class="overlay"></div>
      <div class="headertext">
        <h1>EXAMPLE</h1>
      </div>
    </div>
  </div>
</div>

Comments