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>
Use
margin-bottom:20px;
orpadding-bottom:20px;
to the h2 element to separate the heading from rest of the content in your flexbox.