Hierarchy, similar to how layers work in design programs, each element in web is in relation with other elements around them. This affects how properties and different attributes affect them. This hierarchy is often called parent, child and sibling. The children of a parent element are INSIDE the div block or container, where as all these divs will be siblings between one another.

Level 01

Margin

Margins are the space between elements that share the same hierarchy. This means that if you add a right margin to Big card it will push the other cards to the right with the specific value given. In this exercise, the Big card is already selected. Use the Spacing control in the style panel to adjust the margin value to create a path for the superpower to move through the evenly stacked cards.

Gameplay

The Webflow superpower is stuck on one side of the canvas! Help it get to the other side by setting properties in the Style panel and adjusting the layout. Once the layout is finalized, you can advance to the next level.