Learn CSS Transforms by Buliding a Penguin - Step 40

Hi there,

the instruction in step 40 is: “Give the pseudo-element a width half that of its parent”
the parent is:

.penguin-body {
width: 53%;

so my solution was:

.penguin-body::before {
width: calc(53% / 2);

however, my code does not pass and the hint says it should be:

.penguin-body::before {
width: 50%;

I’m really sorry to bother because I feel like I’m missing something veryyyy simple here, but could someone point me in the right direction of why it is 50% and not 53/2 ?

Thank you!!

Consider this example

<div id="box-1">
    <div id="box-2">
        <div id="box-3">

Here box-2 is parent element of box-3 and box-1 is the parent of box-2.

Suppose, we set the width of box-1 to 400px and width of box-2 to 50%
Now we want width of box-3 to be half of its parent’s width

So you might think that we should set width of box-3 to 25% which is half of 50%. But, it will be wrong because, percentage is calculated based on the parent element.

In this case the width of box-2 will be 200px which is 50% of its parent element box-1.

If we set width of box-3 to 25% then it will be 25% of the width of its parent element that is 25% of 200px(width of box-2) which is 50px.

But if we set width of box-3 to 50% then it will be 50% of 200px that is 100px and this is what we want.

1 Like

thank you for the explanation :slightly_smiling_face:

1 Like