Learn CSS Flexbox by Building a Photo Gallery - Step 9

HTML-CSS
1

Tell us what’s happening:

I’m not sure what I’m doing wrong here… It says:

"Sorry, your code does not pass. Hang in there.

Hint

You should have a body selector."

I’m quite sure I have created a ‘body’-selector?

Any help is much appreciated!

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">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
    </div>
  </body>
</html>

/* file: styles.css */
* {
  box-sizing: border-box;
}


/* User Editable Region */

.body {
  font-family: sans-serif;
  background-color: #f5f6f7;
}

/* User Editable Region */


.gallery img {
  width: 100%;
  max-width: 350px;
  height: 300px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.1 Safari/605.1.15

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

Link to the challenge:

2

you did add a body, but right now you are saying body is a class. When you use a . in front of the selector its saying that it is a class. For example,

.intro{}

Here I am saying the intro is a class by using the . in front of the name. However, for you body is not a class its a html element. An element does not have a . in front of its name

2 Likes
3

thank you very much for the explanation! :ok_hand:

4

Your welcome, I actually just noticed your body style is missing the margin style as well. So if you remove the . in front of body, and add the margin style it gives you in the challenge then it will pass

5

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