Learn CSS Variables by Building a City Skyline - Step 21

Tell us what’s happening:

I evened out the building and even brought the closer together than this but the code will not pass… Can anyone help me out with this issue? Thankyou!

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></div>
  <div></div>
  <div></div>
    <div class="background-buildings">
      <div></div>
      <div></div>
      <div class="bb1">
        <div class="bb1a"></div>
        <div class="bb1b"></div>
        <div class="bb1c"></div>
        <div class="bb1d"></div>
      </div>
      <div></div>
      <div class="bb2"></div>
      <div></div>
      <div class="bb3"></div>
      <div></div>
      <div class="bb4"></div>
      <div></div>
      <div></div>
    </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/124.0.0.0 Safari/537.36

Challenge Information:

Learn CSS Variables by Building a City Skyline - Step 21

Look like you are missing some code here <div></div> code <div></div>

Count the number of div elements, within your html file. And read carefully how many div elements asked for adding in the challenge instructions.
@joshbailey

I keep reading it over and over, maybe I just don’t understand the semantics of what it is saying? I switched it to encapsulating the entire backgorund-buildings div twice in new

's but still its telling me I need 5 new div elements, but I cant tell where…

i cant tell what part of my code you are referring to… ;;;

For some reason you have three divs above the background building element, and a div before and after the bb2 element.

All those need to be deleted

Thats how it showed up on CodePen? but the real problem is here:

<div></div>
    <div class="bb2"></div>
    <div></div>
    <div class="bb3"></div>
    <div></div>
    <div class="bb4"></div>
    <div></div>
    <div></div>
  </div>

You need to move all those down and add bb1 in the first div.

I am going to remove this comment as it has nothing to do with the current topic. I am not sure what you are asking here, but if you have a question or need guidance on your coding journey then please make your own topic in the appropriate section of the forum