Learn the CSS Box Model by Building a Rothko Painting - Step 23

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

/* file: styles.css */
.canvas {
  width: 500px;
  height: 600px;
  background-color: #4d0f00;
  overflow: hidden;
}

.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 class="two">  
          </div>
        </div>
        </div>

<!-- User Editable Region -->



<!-- User Editable Region -->

      </div>
    </div>
  </body>
</html>

Your browser information:

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

Challenge: Learn the CSS Box Model by Building a Rothko Painting - Step 23

Link to the challenge:

Test

Sorry, your code does not pass. Hang in there.

Hint

You should have a second div element in your .canvas element.

div element should have the opening and the closing tag. You don’t add the closing tag for one div element. This is .one element:

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

.two element should look like the previous only class value is “two”.


THANKS VERY MUCH

1 Like