CSS Box Model

Every element is a box made of content, padding, border, and margin. With box-sizing: border-box the width includes padding and border, so the box stays the size you set. margin: 1rem auto centers a block with a set width horizontally.

.box {
  box-sizing: border-box;
  width: 20rem;
  padding: 1rem;
  border: 2px solid #333;
  margin: 1rem auto;
}