Learn CSS Transforms by Building a Penguin - Step 12

HTML-CSS
1

** Use the margin property to horizontally center the .penguin element, and set the margin-top to 75px .**
You should give .penguin a margin-top of 75px , but found auto .

.penguin {
  width: 300px;
  height: 300px;
  margin-top: 75px;
  margin: auto;
}

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Penguin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>

  <body>
    <div class="penguin"></div>
    <div class="ground"></div>
  </body>
</html>

/* file: styles.css */
body {
  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.penguin {
  width: 300px;
  height: 300px;
  margin-top: 75px;
  margin: auto;
}

.ground {
  width: 100vw;
  height: 400px;
  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
  z-index: 3;
  position: absolute;
}

Your browser information:

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

Challenge: Learn CSS Transforms by Building a Penguin - Step 12

Link to the challenge:

2

You can give values to the ‘margin’ property in different ways.
This is just an example:
margin: 10px 5px (top-bottom, left-right)
margin: 10px 5px 10px (top, left-right, bottom)
margin: 10px (all margins)
margin: 10pf 5px 10px 5px (top, right, bottom, left)

Decide what to use for this chalenge.

1 Like
3

It still show error " You should give .penguin a margin of auto , but found `` ."

.penguin {
  width: 300px;
  height: 300px;
  margin-top: 75px;
  margin: 10px 5px (top-bottom, left-right);
}
4

I gave you just guidance, not a solution. Why you have added my comments “(top-bottom, left-right)”? You should add only one ‘margin’ property with values set as follows:

margin: Xpx auto Ypx

The instruction is: " Use the margin property to horizontally center the .penguin element, and set the margin-top to 75px ."

So, as you can see in the example given above, the first value corresponds to the top margin, the second value (auto) corresponds to the left and right margins, and the third value is to the bottom margin.

This is the second solution if it is easier for you:

  margin-top: Xpx;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: Ypx;
1 Like
5

I understand now thanks a lot :pray: :palms_up_together:

1 Like
6

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