Learn CSS Variables by Building a City Skyline - Step 33

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

this is the error message im getting:
You should add the position property of absolute to .background-buildings, foreground-buildings .

I feel like ive done that but am still getting the message so what am i doing 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></div>
    <div></div>
    <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>
    <div class="bb4"></div>
    <div></div>
    <div></div>
  </div>

  <div class="foreground-buildings">
    <div class="fb1"></div>
    <div class="fb2"></div>
    <div class="fb3"></div>
    <div class="fb4"></div>
    <div class="fb5"></div>
    <div class="fb6"></div>
  </div>
</body>
</html>
/* file: styles.css */
:root {
--building-color1: #aa80ff;
--building-color2: #66cc99;
--building-color3: #cc6699;
--building-color4: #538cc6;
}

* {
border: 1px solid black;
box-sizing: border-box;
}

body {
height: 100vh;
margin: 0;
overflow: hidden;
}
.background-buildings, foreground-buildings {
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: space-evenly;
position: absolute;
}

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

.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%;
background-color: var(--building-color2);
}

.bb3 {
width: 10%;
height: 55%;
background-color: var(--building-color3);
}

.bb4 {
width: 11%;
height: 58%;
background-color: var(--building-color4);
}

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

.fb2 {
width: 10%;
height: 40%;
}

.fb3 {
width: 10%;
height: 35%;
}

.fb4 {
width: 8%;
height: 45%;
}

.fb5 {
width: 10%;
height: 33%;
}

.fb6 {
width: 9%;
height: 38%;
}
  
  **Your browser information:**

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14816.131.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

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

Link to the challenge:

i think you’ve misunderstood something. You were only supposed to have 2 style elements in this block.
(position and top)

still having a hard time understanding

okay, no problem. Can you go back to the step and read the exercise again.
Then tell me in your own words, what do you think the exercise asked for?

create a top and position value for .background-buildings. then combine .foreground-buildings and .background-buildings

okay. But the exercise doesn’t actually say to create these styles, instead it say:

Move the position and top properties and values from .foreground-buildings to .background-buildings

So if you restart the step, you are shown a big block of styling and the very last style block is:

.foreground-buildings {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
}

So you can see it is a selector for .foreground-buildings. And the instructions say to move the style lines of position and top from here to some-place else…

this is the message i keep getting

You should add the position property of absolute to .background-buildings, foreground-buildings .

hopefully you have followed the first step?
(that is move the 2 styles to a new .background-buildings selector as mentioned)?

Assuming you have done so, then the next step after that is:

then select both .background-buildings and .foreground-buildings there, effectively applying those styles to both of the elements. You can use a comma (, ) to separate selectors like this: selector1, selector2 .

So you just need to modify the new block you made for .background-buildings to include the foreground-buildings as mentioned by this step.
provided you did step 1 correctly, then added the class selector to the new block, then you should be good.

If this is not clear, please post your newest attempt (full code please) in response here.

i got it thanks so much!