Step 20 Rothko Painting

HTML-CSS
1

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?

284209771_982272409108264_8136157309668670727_n
284209771_982272409108264_8136157309668670727_n1920×1080 175 KB 

  **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:

2

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:

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.