I'm being asked to nest a H1 element inside a .header element. Clearly l'm missing something

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Photo Gallery</title>
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <div class="header">
    </div>
</body>
<style>
  .header h1 {
    CSS FLEXBOX PHOTO GALLERY
  }
  </style>
</html>

/* file: styles.css */


  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Step 4

Link to the challenge:

2

“Inside the .header element nest an h1 element with the text CSS FLEXBOX PHOTO GALLERY.”

This isn’t asking for you to create CSS. This is asking for you to create HTML.

3

Do you mean like this? l still get the wrong answer

Photo Gallery
CSS FLEXBOX PHOTO GALLERY
4

We can’t quite see your actual HTML. To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key.

7 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <div class="header">
      </div>
      </h1>CSS FLEXBOX PHOTO GALLERY</h1>
  </body>
</html>

Thanks for showing me the 3 back ticks trick.

8

Nesting an element means placing it between the opening and closing tags of another element. Is your h1 nested inside the div? Also, opening tags don’t have a forward slash.

9

oh sorry l typed the forward slash in error.

10

The h1 was NOT nested inside the div. l thought it wanted me to do a CSS originally because it asked for a .header element. From my understanding that means CSS code.
My new code…

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <div class="header">
      <h1>CSS FLEXBOX PHOTO GALLERY</h1>
      </div>
  </body>
</html>

This l got correct. Thankyou for the help. :smile:

11

.header element is just a shorter way to say "the element with a header class. It is using the CSS syntax to refer to the element.

12

ohhh. that makes sense. l’ll keep that in mind moving forward. Can’t wait to finish this course. Thanks for the timely reply.

13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.