我遇到了一个问题，每当我在其中添加另一个元素时，例如，P元素，我的div就会垂直移动，它应该始终与顶部标题保持一致，但每当我在其中添加另一个元素时，它就会稍微移动
背景应该像这样粘在顶部的页眉上
它应该是怎样的e

看起来如何

有没有办法让主体div总是粘在主标题div上？
下面是HTML代码

<div class="menucontainer">
<a href="index.html">
    <div class="logocontainer">
        <img src="images/logo.png" class="logo"></a></div>
</div>

<div class="mainbody">
</div>

CSS代码

.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;
     }