Build a House Painting - Build a House Painting

Curriculum Help
,
1

Tell us what’s happening:

I do have my #house on position relative, yet it keeps being rejected. How relative does it needs to be positioned?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>House Painting</title>
    <link rel="stylesheet" rel="styles.css"/>
</head>
<body>
    <div id="house">
        <div id="chimney"></div>
        <div id="roof"></div>
        <div id="window-1">
            <div class="window-1-left"></div>
        </div>
        <div id="window-2">
            <div class="window-2-right"></div>
        </div>
        <div id="door"></div>
    </div>
</body>
</html>

/* file: styles.css */
#house {
  position: relative;
  top: 30px;
  left: 30px;
  width: 500px;
  height: 400px;
  background-color: gray;
  border: 3px solid #110f11;
}

#chimney {
  position: absolute;
  top: 50px;
  right: 120px;
  z-index: -1;
  width: 40px;
  height: 370px;
  border: 1.5px solid #110f11;
  background-color: #fff2f2; 
}

#roof {
  position: absolute;
  top: 0;
  margin: 0 auto;
  width: 600px;
  height: 150px;
  border: 2px solid coral;
  background-color: #fff2f2;
}

#window-1 {
  position: absolute;
  top: 20px;
  left: 40px;
  display: flex;
  align-self: flex-start;
  margin-top: 20px;
  aspect-ratio: 1/3; 
  width: 80px;
  height: 100px;
  border: 2px solid rgb(239, 239, 160);
  background-color: gray;
}

.window-1-left {
  display: flex;
  justify-content: space-around;
}

window-2 {
  position: absolute;
  top: 20px;
  right: 40px;
  display: flex;
  align-self: flex-start;
  margin-top: 20px;
  aspect-ratio: 1/3;
  width: 80px;
  height: 100px;
  border: 2px solid rgb(239 239 160);
  background-color: gray;
}

.window-2-right {
  display: flex;
  justify-content: space-around;
}

#door {
  position: absolute;
  top: 50px; 
  left: 30px;
  display: flex;
  align-self: flex-end;
  width: 80px;
  height: 150px;
  border: 2px solid rgb(239 239 160);
  background-color: gray;
}

Your browser information:

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

Challenge Information:

Build a House Painting - Build a House Painting

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-house-painting/66d6a7a3e1aa411e94bf2346.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

double check this line