Learn CSS Transforms by Building a Penguin - Step 15

I understood the lesson, but I didn’t understood why the left-mountain container get the positioning of penguin container when I set this position to absolute. Looks like penguin becomes the parent element , but it does not make sense to me. Can anyone explain this pls?

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

    <div class="left-mountain"></div>
    <div class="penguin"></div>
    <div class="ground"></div>
/* 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;

/* User Editable Region */

.left-mountain {
  width: 300px;
  height: 300px;
  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
  position: absolut


/* User Editable Region */

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

.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/ Safari/537.36

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

Link to the challenge:

Just typo in absolute.

I know there’s a typo, but that’s not the question. Why the container goes down due to the margin of the sibling container after setting the position to absolute?

they don’t get the same positioning.
To see the actual positioning add this line
border: 1px solid black to the .left-mountain block temporarily to see its edges

then add
border: 2px solid red to the .penguin to see its edges also

They are not in the same place.