Step 20 Rothko Painting

Tell us what’s happening:
Describe your issue in detail here.
I have passed the challenge, but I think when i set the margin:20px auto; the div class =“one” should be below the canvas, but it is not. Can you explain that to me?

  **Your code so far**
/* file: styles.css */
.canvas {
width: 500px;
height: 600px;
background-color: #4d0f00;
}

.frame {
border: 50px solid black;
width: 500px;
padding: 50px;
margin: 20px auto;
}

.one {
width: 425px;
height: 150px;
background-color: #efb762;
margin:20px auto;
}
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Rothko Painting</title>
  <link href="./styles.css" rel="stylesheet">
</head>
<body>
  <div class="frame">
    <div class="canvas">
      <div class="one"></div>
    </div>
  </div>
</body>
</html>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36

Challenge: Step 20

Link to the challenge:

why would you think that should after “canvas”, here is how corresponding “html” looks like,

<div class="frame">
      <div class="canvas">
        <div class="one"></div>
      </div>
    </div>

as you can see, canvas contains div element with “one” classname, so it’ll be on top of “canvas” not other way around

unless you used some sort of “stacking order” with “z-index” that could lead to changes in which element should come before which, but that’s totally beyond scope of this step, feel free to explore this on your own until it’s being introduced in curriculum :slight_smile: