Learn CSS Flexbox by Building a Photo Gallery - Step 5

HTML-CSS
1

Tell us what’s happening:

I am still wrong Can you help? Step 5 Building a Photo Gallery

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">
      </div>
      <h1>css flexbox photo gallery</h1>
    </header>
    <div class="gallery">
      <img>
      <img>
      <img>
      <img>
      <img>
      <img>
      <img>
      <img>
      <img>
    </div>
  </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/131.0.0.0 Safari/537.36

Challenge Information:

Learn CSS Flexbox by Building a Photo Gallery - Step 5

2

Hi @maxi2k

Here is a comparison of the original code and your code.

The code in blue is the original code, the code in red is your code.
The code in magenta is the overlap.

image
image483×469 13.6 KB

It looks you have and extra div element.
Try removing the empty div element.

Happy coding

1 Like