How to avoid Div changing positions when another element is added - html

Question

I'm having a problem in which whenever I add another element inside, like for example, a P element, my div moves out of position vertically, it's supposed to stick with the top header at all times, but whenever I add another element inside it, it slightly shifts out of position
The background is supposed to be glued to the header on top like this
How it should be
How it looks
Is there any way to make so the mainbody div ALWAYS sticks to the main header div?
.menucontainer {
width: 1000px;
height: 150px;
margin: auto;
outline: solid black 1px;
background-image: url("images/backgrounds/mainheaderbanner.png");
background-position: -75% 40%;
}
.mainbody {
background-color: rgba(0, 0, 0, 0.8);
position: relative;
top: -18px;
margin: auto;
width: 1002px;
height: 1345px;
}
<div class="menucontainer">
<a href="index.html">
<div class="logocontainer">
<img src="images/logo.png" class="logo"></a></div>
</div>
<div class="mainbody">
</div>

Answer 1

In some Editors each time, after using automatic code indentation, an "Enter" will appear between two elements and create white space again!
To eliminate the space between two divs try to write them in the same line :
in your case :
<div class="menucontainer"><div class="logocontainer"><img src="images/logo.png" class="logo"></div></div><div class="mainbody"></div>
test it and tell me if it works!