Learn CSS Flexbox by Building a Photo Gallery - Step 5

HTML-CSS
1

Tell us what’s happening:

i have tried everything that i know but iwas unable to solve it

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 src="">
      <img src="">
      <img src="">
      <img src="">
      <img src="">
      <img src="">
      <img src="">
      <img src="">
      <img src="">
      </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/126.0.0.0 Safari/537.36

Challenge Information:

Learn CSS Flexbox by Building a Photo Gallery - Step 5

2

Hi there. The challenge wants the gallery div below your header. Right now the gallery is technically inside of the header. That’s because it’s below the opening tag of the header. Move it below the closing header tag and you should be good.

Let me know if any of what I said is confusing. This stuff can be complicated sometimes. Happy coding. :slight_smile:

1 Like