Spacing

<div>
div element
</div>
<p>
p element
</p>
<h1>h1 to h6 elements</h1>

div {
  background-color: red;
}

p {
  background-color: yellow;
}

h1 {
  background-color: green;
}

<header class="header-container">
  <div class="centered-element">I have a width, the margin: auto property works!</div>
</header>
<br>
<footer class="footer-container">
  <div class="non-centered-element">I do not have a width, the margin: auto property does not work!</div>
</footer>

.header-container {
  background-color: blue;
}
.centered-element {
  width: 50%;
  background-color: yellow;
  margin: auto;
}
.footer-container {
  background-color: red;
}
.non-centered-element {
  background-color: yellow;
  margin: auto;
}