Learn CSS Flexbox by Building a Photo Gallery - Step 5

Tell us what’s happening:
Describe your issue in detail here. Hi, Please assist, is there a place where I am not getting it right? I have placed the gallery class in the division element.

Your code so far

css flexbox photo gallery

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

<!-- User Editable Region -->

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

<!-- 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/ Safari/537.36

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

Link to the challenge:

The location of the div is incorrect. You should have placed it after the .header element


The reason so many people are nesting the div with the 9 image tags nested between the header section is that the step is written poorly and is misleadingly incorrect.

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.

1). . header is not the element, it is the name of the headers class
2) .gallery is the divs class. The step should state "Inside that “div element”, create nine “img” elements.

When i see .header element. I’m confused because I know they’re asking about the elements name and not its class name but I think, okay, so place the div just below or between the header section…

1 Like

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