css - Vertical margin changes on horizontal resize

Question

I can't figure out why my div is losing vertical margin on a horizontal resizing of the screen if the margin I give the div is margin: 20% auto. Am I misunderstanding how the percentages work? Below is a demo.

CodePen

body {
  background-color: black;
}

.main {
  background-color: white;
  color: black;
  margin: 20% auto;
  padding: 2em;
  text-align: center;
}

<div class="main">
  <h1>Hello World!</h1>
</div>

Answer 1

The percentage works on the width of the container block, according to the css specifications in w3.org

The percentage is calculated with respect to the width of the generated box's containing block.

Read here in details