I'm taking a beginner web development class and the assignment I'm working on is asking me to recreate a markup for a page. I am given a .html file and I am only allowed to make changes using CSS. The goal of the assignment is to make the .HTML file I'm given look exactly like the markup.

My issue is that there are 2 h1/h2 tags, one pair is in the header and one is in the main. I want to make an alteration to the first pair of h1/h2 tags that are in the header. For some reason, both pairs are inside of the header tag and I don't know how to change that through CSS. 

in the provided screenshot the markup is on the left and my progress is on the right.[ <https://www.dropbox.com/s/ghdl3p1n311vs4q/Screenshot%202020-05-17%2017.28.40.png?dl=0> ]

Can someone please explain why both tags are affected by the header even though only one pair resides there? as well explanation of how to alter just one pair?

```
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
   <link href= "reset.css" rel = "stylesheet"  />
   <link href= "hw2-problem2.css" rel = "Stylesheet" >
   <meta charset="utf-8">
   <title>Art Store</title>
   <link href='http://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>

</head>
<body>
   <header>
     <h1>Art Store</h1>
     <h2>Super cool tagline will go here</h2>
   </header>
   <main>
      <h2>Still waiting</h2>
      <p id="announcement">Our website will be live in</p>
      <p id="timeline">4 years, 3 months, and 2 days<sup>*</sup></p>   
       <p id="footnote"><sup>*</sup>hopefully</p>
   </main>
  <footer>
        <h2>Recent Acquisitions</h2>
        <div>
            <img src="images/07020.jpg" alt="Liberty Leading the People">
            <img src="images/05030.jpg" alt="The Death of Marat">
            <img src="images/106020.jpg" alt="Girl with a Pearl Earring">
        </div>
  </footer>   
</body>
</html>

CSS Code: 
body {
    background-image: url("images/art-background4.jpg");
    background-size: 100% 100%;
    padding: 12.55em 6.27em;
    margin: 6.27;

  }

  header{
    position:absolute;
    top:2em;    
    left:2em; 
    padding: 2em;
    background-color: hsla(0, 0%, 0%, 0.473);
  }

  h1{
    font-size: 6em;
    color: white;
    margin-bottom: 2em;

  }

  h2{
    margin: 2em;
  }

```