Learn CSS Variables by Building a City Skyline - Step 18

Tell us what’s happening:
Describe your issue in detail here.
“You should place these div elements within the .background-buildings element.” But I did nest these elements in the element. Is the order of the nesting wrong?

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

  </div>
</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%;
}

.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);
}
  
  **Your browser information:**

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

Challenge: Learn CSS Variables by Building a City Skyline - Step 18

Link to the challenge:

Hi, I just figured it out! These can be tricky. Good on you for working on this activity, this one was one of my hardest!

Okay, so let’s look at those ‘div’ boxes. Gets confusing quickly, right? Let’s review our directions for a second:

Your first building looks pretty good now. Nest three new div elements in the background-buildings container and give them the classes of bb2 , bb3 , and bb4 in that order. These will be three more buildings for the background.

Awesome, so that means we should already have, what you have above, this section of code:

 <body>
    <div class="background-buildings">
      <div class="bb1">
        <div class="bb1a"></div>
        <div class="bb1b"></div>
        <div class="bb1c"></div>
        <div class="bb1d"></div>
      </div>

And AFTER that class bb1 div box that holds bb1a, bb1b, bb1c, and bb1d, we need to MAKE A NEW div.

Instead, if we we compare to what you’re stuck on here:

<body>
  <div class="background-buildings">
    <div class="bb1">
      <div class="bb1a"></div>
      <div class="bb1b"></div>
      <div class="bb1c"></div>
      <div class="bb1d"></div>
      <div class="bb2"></div>
      <div class="bb3"></div>
      <div class="bb4"></div>
    </div>

  </div>
</body>

You can see that you actually crammed all of the new bb2, bb3, and bb4 div’s inside of… that ‘div class bb1’ element.

Does that make sense?

If you start to follow those closing tags, go back and see where you “open” and “close” a div box. When did what div open, and with what class? Did it ever close? What got put inside?

I hope that helps you! You can do this!

1 Like

Thanks, took some time to figure out, but it passed :slight_smile: