title: Having troubles targeting an h1 inside a div
body: <p>I have this part on my index.html page</p>
  
  <pre><code>        &lt;!-- Top of the Page --&gt;
  &lt;div id="home" class="container header"&gt;
      &lt;div class="row"&gt;
          &lt;div class="image-header margin-0"&gt;
              &lt;div class="overlay"&gt;&lt;/div&gt;
              &lt;div class="headertext"&gt;
                  &lt;h1&gt;EXAMPLE&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>I have tried targeting: 
  .headertext .h1
  .headertext h1
  p h1</p>
  
  <p>I basically tried every combination, but I can't achieve the effect I desire.</p>
  
  <p>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.</p>
  
  <p>Thanks everyone!</p>
  
  <p>edit: removed p tags around h1</p>
  
  <p>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!</p>