Build a House Painting - Build a House Painting

HTML-CSS
1

Tell us what’s happening:

how can i pass this #44 test . when top is given 0 its showing error and when top is given some value , it shows error

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>House Project</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="house">
      <div id="chimney"></div>
      <div id="roof"></div>
      <div id="window-1"></div>
      <div id="window-2"></div>
      <div id="door"></div>
    </div>
  </body>
</html>


/* file: styles.css */
/* House */
#house {
  position: relative;
  width: 500px;
  height: 400px;
  background-color: #f4c27a;
  border: 4px solid #8b5e3c;
  margin: 50px auto;
}

/* Chimney */
#chimney {
  position: absolute;
  width: 50px;
  height: 80px;
  top: 4px; /* slightly below border to satisfy "top of house" test */
  left: 80px;
  background-color: #6b3e26;
  border: 2px solid #4a3f35;
  z-index: -1; /* behind house */
}

/* Roof */
#roof {
  position: absolute;
  width: 100%;
  height: 100px;
  top: 0;
  left: 0;
  background-color: #b85734;
  border: 2px solid #5a2a1f;
}

/* Windows */
#window-1, #window-2 {
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: #87ceeb;
  border: 2px solid #5a5a5a;
}

#window-1 {
  top: 150px;
  left: 90px;
}

#window-2 {
  top: 150px;
  right: 90px;
}

/* Door */
#door {
  position: absolute;
  width: 100px;
  height: 150px;
  bottom: 0;
  left: 200px;
  background-color: #7b4a20;
  border: 2px solid #5a3d1a;
}

Your browser information:

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

Challenge Information:

Build a House Painting - Build a House Painting

2

Your chimney has a height of 80px. So, what does top need to be set at to put the bottom of the chimney on the top of the house? With your current top setting at 4px, the chimney isn’t even visible.