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 ?
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.