Learn CSS Variables by Building a City Skyline - Step 10 Nesting divs and CSS selector issue?

Tell us what’s happening:
Describe your issue in detail here.

Here is the question asked.
Nest a div with a class of bb1 in the background buildings container. Open your styles.css file, and give .bb1 a width of 10% and height of 70% . “bb” stands for “background building”, this will be your first building.

the editor doesnt seem to detect my class selector. Am I doing something wrong? Is there something different I need to do based on the “container” instruction?

I tried nesting the bb1 div within the original div and that didn’t seem to enable the CSS selector.

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>
    <div class="bb1"></div>
    .bb1{
      width:10%;
      height:70%;
    }
  </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%;
}
    

Your browser information:

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

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

Link to the challenge:

Hi there, you are trying to write css code inside your html.

So when they said to “nest a div” they meant you should be writing a div element in html <div> etc.

1 Like

With your “.bb1” selector this is CSS and should be in your “styles.css” to be applied
to your code.

Also as you said you have done, the actual “div” that you are selecting itself should be nested inside the other specified “div”

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