Learn CSS Variables by Building a City Skyline - Step 21

Tell us what’s happening:

Describe your issue in detail here:

The return is: “You should add 5 new div elements.”

I’m sorry if i can’t see different, but i see i added exactly 5 new divs.
The code comments for each div i placed only here, in the post.
I’ve already searched in the forum and did not find any post with this same code and issue. And i watched a YouTube video where one guy pass through with this same code.
I really don’t know what’s happening.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">    
  <head>
    <meta charset="UTF-8">
    <title>City Skyline</title>
    <link href="styles.css" rel="stylesheet" />   
  </head>

  <body>

<!-- User Editable Region -->

    <div class="background-buildings">
      <div></div> <!-- First Div added -->
      <div></div> <!-- Second Div added -->
      <div class="bb1">
        <div class="bb1a"></div>
        <div class="bb1b"></div>
        <div class="bb1c"></div>
        <div class="bb1d"></div>
      </div>
      <div class="bb2"></div>
      <div class="bb3"></div>
      <div></div> <!-- Third Div added -->
      <div class="bb4"></div>
      <div></div> <!-- Fourth Div added -->
      <div></div> <!-- Fifth Div added -->
    </div>

<!-- User Editable Region -->

  </body>
</html>
/* file: styles.css */
* {
  border: 1px solid black;
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.background-buildings {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
}

.bb1 {
  width: 10%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  --building-color1: #aa80ff;
}

.bb1a {
  width: 70%;
  height: 10%;
  background-color: var(--building-color1);
}

.bb1b {
  width: 80%;
  height: 10%;
  background-color: var(--building-color1);
}

.bb1c {
  width: 90%;
  height: 10%;
  background-color: var(--building-color1);
}

.bb1d {
  width: 100%;
  height: 70%;
  background-color: var(--building-color1);
}

.bb2 {
  width: 10%;
  height: 50%;
}

.bb3 {
  width: 10%;
  height: 55%;
}

.bb4 {
  width: 11%;
  height: 58%;
}
    

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

Learn CSS Variables by Building a City Skyline - Step 21
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-variables-by-building-a-city-skyline/step-21`Preformatted text`

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

Hi! Thanks for detailed description. And your code passes for me. Try to clean cache, cookies, disable browser extentions or use another browser to pass

1 Like

Thank you, my friend!

Nothing changed with the cache and cookies cleaning, but it worked in another browser (Edge).

1 Like