Build a House Painting - Build a House Painting

HTML-CSS
1

Tell us what’s happening:

My chimney shows correctly in the preview, but the test isn’t passing. I’ve tried different top values and z-index: -1, with no luck. Any ideas what I might be missing?

Thanks!

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 Structure</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 */
* {
    box-sizing: border-box;
  }

body {
  background-color: rgb(0, 225, 255);
}

#house {
    position: relative;
    margin: 200px auto;
    border: 4px solid rgb(146, 136, 0);
    background-color: rgb(0, 78, 147);
    width: 500px;
    height: 400px;
    z-index: auto;
  }
  
  #chimney {
    position: absolute;
    top: -26%;
    left: 75%;
    width: 75px;
    height: 100px;
    border: 2px solid black;
    background-color: red;
    z-index: -1;
  }
  
  #roof {
    position: absolute;
    top: 0;
    background-color: brown;
    width: 100%;
    height: 20%;
    border: 3px solid brown;
    z-index: 2;
  }
  
  #window-1 {
    position: absolute;
    background-color: goldenrod;
    top: 30%;
    left: 10%;
    width: 20%;
    height: 30%;
    border: 2px solid rgb(146, 136, 0);
    z-index: 3;
  }
  
  #window-2 {
    position: absolute;
    background-color: goldenrod;
    top: 30%;
    right: 10%;
    width: 20%;
    height: 30%;
    border: 2px solid rgb(146, 136, 0);
    z-index: 3;
  }
  
  #door {
    position: absolute;
    bottom: 0;
    background-color: goldenrod;
    right: 37%;
    width: 25%;
    height: 50%;
    border: 2px solid rgb(146, 136, 0);
    z-index: 4;
  }

Your browser information:

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

Challenge Information:

Build a House Painting - Build a House Painting

1 Like
2

Hey, the test here is a bit too strict. You should use px to move the chimney of the same value as its height. Hope this helps

2 Likes
3

Thank you, that did the trick!

2 Likes
4

Thank you, i used the same trick and it worked.