Trying to add margin-top to separate the heading from the rest of the content

Question

I am trying to add margin-top to separate the heading from the rest of the content, but every time I do so the content moves down more. I used a flexbox to center the items, but I can't add margin-top to it because when I do it affects the flexbox property I added to it.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.8%;
}

body {
  background: #FFF8DC;
}

.wrapper-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.content-content h2 {
  font-size: 2.1rem;
}

p {
  font-size: 1.3rem;
}

<div class="wrapper-container">
  <div class="content-content">
    <h2>Black Jack</h2>
    <p id="message-el">Want to play a round</p>
    <p>Cards:</p>
    <p>Sum:</p>
  </div>
</div>

Answer 1

Use margin-bottom:20px; or padding-bottom:20px; to the h2 element to separate the heading from rest of the content in your flexbox.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.8%;
}

body {
  background: #FFF8DC;
}

.wrapper-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.content-content h2 {
  font-size: 2.1rem;
  padding-bottom:20px;
}

p {
  font-size: 1.3rem;
}

<div class="wrapper-container">
  <div class="content-content">
    <h2>Black Jack</h2>
    <p id="message-el">Want to play a round</p>
    <p>Cards:</p>
    <p>Sum:</p>
  </div>
</div>

Answer 2

I'm not sure if I understood you right. to separate heading from the rest you need margin-bottom as I added in the snippet .

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.8%;
}

body {
  background: #FFF8DC;
}

.wrapper-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.content-content h2 {
  font-size: 2.1rem;
  margin-bottom:2rem;
}

p {
  font-size: 1.3rem;
}

<div class="wrapper-container">
  <div class="content-content">
    <h2>Black Jack</h2>
    <p id="message-el">Want to play a round</p>
    <p>Cards:</p>
    <p>Sum:</p>
  </div>
</div>

Another way to do it is by simply adding a break

<div class="wrapper-container">
  <div class="content-content">
    <h2>Black Jack</h2>
    <br>
    <p id="message-el">Want to play a round</p>
    <p>Cards:</p>
    <p>Sum:</p>
  </div>
</div>