Learn CSS Flexbox by Building a Photo Gallery - Step 5

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

Step 5

Below your .header element, create a new div element and assign it a class of gallery. This div will act as a container for the gallery images.

Inside that .gallery element, create nine img elements.

It says that “Your .gallery element should have nine img elements.”
What does it mean?

How to write code for it

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <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>
    <header class="header">
      <h1>css flexbox photo gallery</h1>
    </header>
    <div class="gallery">
    </div>
  </body>
</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/107.0.0.0 Safari/537.36

Challenge: Learn CSS Flexbox by Building a Photo Gallery - Step 5

Link to the challenge:

  1. List item

they want you to add 9 img elements.
An img element looks like this <img>