<main>
<div>
This is a block-element which is centered and stacked on top of another block-element.
</div>
<div>
This is a block-element which is centered and stacked on top of another block-element. I am larger than the other blocks because of the CSS selector :nth-child()
</div>
<div>
This is a block-element which is centered and stacked on top of another block-element.
</div>
</main>
body {
background: #40BDB7;
font-size: 80%;
}
main {
background: white;
margin: 20px 0;
padding: 10px;
}
main div {
background: black;
margin: 0 auto;
color: white;
padding: 15px;
margin: 5px auto;
border-radius: 5px;
}
main div:nth-child(1) {
width: 200px;
}
main div:nth-child(2) {
width: 400px;
}
main div:nth-child(3) {
width: 125px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.