Whilst I wholly agree with what @TechnoBear here, I wonder whether you’ve heard of the ‘box-model’? If not, it may well explain some of the difficulties you’re having with some of the fundamentals of how HTML and CSS interact.
Take a look at the image below, concentrate on the actual ‘box’ itself, as that is what sets the reference point for all of the attributes that can be applied to it, and the CSS that follows. The only HTML tags you would need to set this up is this:
<div class="theBox">This is the content of our box</div>
As you can see, the ‘box’ is made up of the element itself (the 400 x 100 part). Added to that is its padding, its border, and its margin - here they are set 20px, 6px and 20px respectively. Added together, you can see that our box is now 492px wide
20 + 6 + 20 + 400 +20 + 6 +20 = 492
and the height is 192px
20 + 6 + 20 + 100 +20 + 6 +20 = 192
I created a worked example on Codepen. Feel free to create your own fork and play around to your heart’s content and see how each of the attributes you can set interact with each other.
The red border around the body is just to show where the outer edges of the body lies. Without any further dimensional settings, it occupies the full width of the browser window, and takes its height from the elements contained within it.