Learn CSS Variables by Building a City Skyline - Step 11

Tell us what’s happening:
Describe your issue in detail here.
My issue is it says Nest four div elements in the .bb1 container. Give them the classes bb1a, bb1b, bb1c, and bb1d in that order. This building will have four sections. I’ve done that but maybe I’m not doing it correctly?
Your code so far
This is my code below.


<!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 class="bb1b">
      <div class="bb1c">
      <div class="bb1d">
    </div>
  </body>
</html>


html
<!-- 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 class="bb1b">
      <div class="bb1c">
      <div class="bb1d">
    </div>
  </body>
</html>

```css
/* 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%;
}
  .bb1a {
  width: 10%;
  height: 70%;
  }
  .bb1b {
  width: 10%;
  height: 70%;
  }
  .bb1c {
  width: 10%;
  height: 70%;
  }
  .bb1d {
  width: 10%;
  height: 70%;
  }    

Your browser information:

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

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

Link to the challenge:

I see a missing > on the first line

edit: also missing the closing tags </div> (hopefully you added those)

Haha thank you I fixed it still the same problem, I was messing around with it to see if I could fix it.

1 Like

I fixed the two issues you addressed at hand the main issue is still persisting, and I also edited the post to show what I fixed in the code. The closing is at the bottom do they all need closing tags?

can I see the new code?
(I can’t see anything new here)

It’s not showing the code being posted in the preview for replying to your question.

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

I see what you’re saying I accidently deleted those in the post, good to know.

<!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 class="bb1b">
      <div class="bb1c">
      <div class="bb1d">
    </div>
  </body>
</html>

you are still missing the closing tags </div>

Okay so I have a closing tag for all of them now, there was one at the bottom of the div code and I did what you said and it still says the same thing.

<!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>
      <div class="bb1a">
        </div>
      <div class="bb1b">
        </div>
      <div class="bb1c">
        </div>
      <div class="bb1d">
      </div>
  </body>
</html>

I think one is still missing.
The one for the .background-buildings?

also all the other divs are supposed to be inside this one

I added the one to background buildings just now. This is the hint it gives. " You should place the new div elements within the .bb1 element."

“also all the other divs are supposed to be inside this one”

I just saw this reply it didn’t refresh and that was my question if I’ve nested them correctly or not.

right so cut and paste the 4 elements you just added inside the bb1

(or you can move the closing tag for bb1 to the correct position to nest the other 4)

That’s what I had it as, so the building back ground which was back 2 or 3 steps had me put the closing tag at the bottom then add bb1 and make it a css, then I’m supposed to nest a,b,c,d in bb1 which I put them underneath the bb1 with the closing tag at the end of bb1d, now if I do what you’re saying which is nest them in with bb1 by making the closing tag at the end of bb1d and I press check code it says put them in order, which they are so idk where I’m going wrong with it. they’re in order a,b,c,d.

You will need to post your latest code for us to give you further advice.

Here you go Randell.

<!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 class="bb1a">

      <div class="bb1b">

      <div class="bb1c">
        
      <div class="bb1d">
      </div>
  </body>
</html>

If you properly indent your code, you will see the following (I removed some code above and below to reduce space).

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

The starting code was:

  <body>
    <div class="background-buildings">
      <div class="bb1"></div>
    </div>
  </body>

In your second line, you should be able to quickly see your first mistake.

After that, you still are not closing any of the new div elements that you nested under the div with id="bb1".