Two different divs sharing css attributes - html

Question

Im creating a website for a guild I am apart of, and whilst creating this page, Im trying to have a div within a div, the dark div (contentBox) for holding the lighter divs (contentSection), which in turn, hold text. However, when altering padding of the contentSection div, it also moves the contentBox div. Ill provide screen shots so you can see what I mean.
Html is simply:
<div class="contentBox">
<div class="contentSection">
<h2> We have TeamSpeak!</h2>
</div>
</div>
CSS is:
.contentBox{
background-color: #1E1E1E;
border-color: #080808;
border-right-style: solid;
border-left-style: solid;
border-width: 1px;
height: 100vh;
width: 70%;
margin: 0 auto;
}
.contentSection{
background-color: #4B4B4B;
height: 30%;
width: 85%;
margin: 110px auto;
padding-top: 5px;
border-radius: 2px;
padding-left: 15px;
}
What I want it to look like:
What it ends up looking like:
I apologise if im too vague, just ask if you have questions.

Answer 1

Question has been Solved, adding overflow: auto fixed the problem!

Answer 2

Why this is happening
The effect you are seeing is due to collapsing margins. Adding overflow: auto creates a new block formatting context which keeps borders within the edges of the containing block.
Adding padding also prevents margins from collapsing. In your top image, you have padding, so the margin on h2 and the inner div are contained within the outer block. With no padding, the margin of inner elements collapse with the margins from the outer div's.

Answer 3

try this
is it ok?
.contentBox {
background-color: #1E1E1E;
border-color: #080808;
border-right-style: solid;
border-left-style: solid;
border-width: 1px;
height: 100vh;
width: 70%;
margin: 0 auto;
}
.contentSection {
background-color: #4B4B4B;
height: 30%;
width: 85%;
margin: 110px auto;
padding-top: 5px;
border-radius: 2px;
padding-left: 15px;
padding-top: 50px;
}
<div class="contentBox">
<div class="contentSection">
<h2> We have TeamSpeak!</h2>
</div>
</div>