Learn CSS Flexbox by Building a Photo Gallery - Step 9

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
How do I Remove the margin from your body element, set the font-family to sans-serif , and give it a background-color of #f5f6f7 as the value.

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{
  margin: none;
  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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36 Edg/112.0.1722.64

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

Link to the challenge:

2

That is not a body selector. It’s a class selector. If you want to select an HTML element directly, just use the element name, without any prefix.
To remove margin from an element, set its value to 0.

3

Thanks- I try many ways including removing the class selector and the margin set to 0 but still not working. Any more hint?

4

If you remove the dot before ‘body’ in your selector and change the margin value to 0, your code should pass. You may need to reset the lesson and type the code again if your code is not accepted.

1 Like
5

Ok. let me try it this way. Thanks.

6

It worked :heart_eyes: Thanks alot. I was rewriting the same code over and over when I needed to reset it :sweat_smile:

7

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