Html 标题标记向下推父元素

所以，这是一个重复的问题： . 我只是在搜索网站时把我的问题写错了

我把我的网站代码放在一个

这是我的html：

<div id="main">
    <section class="section-left">
        <header><h1>My Name</h1></header>
        <content>
            <p></p>
        </content>
    </section><section class="section-right">
        <header><h3>Hello World!</h3></header>
        <content>
            <p></p>
        </content>
    </section>
</div>

当我取出h*标记时，截面元素返回到正确显示的状态，其中没有空格。但是，一旦我在它们里面加上一个h标记，左边的部分要么几乎一直移动到底部，要么如果我在左边添加一个边框（我在另一个论坛上发现的），它会将右边的部分向下推

我能发现的唯一一件事是，通过chrome开发工具查看时：

webkit-margin-before:.83em;
webkit-margin-after:.83em;

有人能看出我在这件事上做得不对吗

另外，如果我只是将这两个部分（我可以将其放入文章标签？）更改为 浮动：左

---

我需要插入什么类型的代码才能使它看起来像现在一样？

部分默认为

垂直对齐：基线

#main section {
    display:inline-block;
    vertical-align:top;  /* Add this to overide */
}

您的HTML无效。@j08691如何无效？content元素不能是section元素的子元素。我明白了。不确定我是从哪里把content元素放进section元素的，但可能是在我看过的几个youtube教程中的一个。谢谢你让我知道，即使这是一个重复，我标记你的答案是正确的，因为这是一个问题的答案。我希望没问题。
#main section {
    display:inline-block;
    vertical-align:top;  /* Add this to overide */
}