Learn CSS Flexbox by Building a Photo Gallery - Step 5

Tell us what’s happening:

how to do this one . keep giving me error message

Your code so far

<!-- file: index.html -->

<!-- User Editable Region -->

<!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">
       <div class="gallery">
      <h1>css flexbox photo gallery</h1>
      <img>
      <img>
      <img>
      <img>
      <img>
      <img>
      <img>
      <img>
      <img></div>
    </header>
  </body>
</html>

<!-- User Editable Region -->

/* 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/123.0.0.0 Safari/537.36

Challenge Information:

Learn CSS Flexbox by Building a Photo Gallery - Step 5

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help! We need to know the exact error message as to give you the best response.

here is the error message : Your new div element should come after your .header element

Hello. Next time you create a topic, try explaining your issue using your own words.
Why is your img elements nested in your header element?
Once moving your header closing tag to directly after the header opening tag your code should pass.

1 Like