Html 如何将两个元素相邻放置？

我试着把两个div放在一起，但是要么应该在右边的div显示在左边的下方，要么它们彼此相邻，但是它们不再靠近左边的边缘，左边的div应该在那里

这是我的HTML

.maincontent{
背景色：白色；
不透明度：0.8；
高度：400px；
宽度：400px；
字体系列：“Arvo”；
边框：1px纯黑；
字体大小：20px；
边际上限：0；
显示：内联块；
浮动：左；
位置：相对位置；
}
.侧边栏{
背景色：#2424；
不透明度：0.8；
边缘顶部：10px；
宽度：50px；
左侧填充：10px；
右边填充：50px；
高度：210px；
边界半径：25px；
填充顶部：10px；
左：10px；
位置：粘性；
排名：0；
}
.linkinsidebar{
文字装饰：无；
颜色：白色；
字体系列：“Arvo”；
字体大小：20px；
}

跳跃

占位符文本

在CSS中，您需要在侧栏和maincontent类中添加左浮动和右浮动。 此外，HTML片段包含两个div中间的体标签。这是错误的

.maincontent{
背景色：白色；
不透明度：0.8；
高度：400px；
宽度：400px；
字体系列：“Arvo”；
边框：1px纯黑；
字体大小：20px；
边际上限：0；
显示：内联块；
浮动：左；
位置：相对位置；
}
.侧边栏{
背景色：#2424；
不透明度：0.8；
边缘顶部：10px；
宽度：50px；
左侧填充：10px；
右边填充：50px；
高度：210px；
边界半径：25px；
填充顶部：10px；
左：10px；
位置：粘性；
浮动：左；
排名：0；
}
.linkinsidebar{
文字装饰：无；
颜色：白色；
字体系列：“Arvo”；
字体大小：20px；
}

跳跃

占位符文本

你有一个零散的

正文

标记开始。哦，不，对不起，那里有一个结束正文标记，我只是没有将它包含在代码段中，不管它在错误的位置，将侧边栏向左浮动，而不是主要内容。或者看看CSS grid/FlexBox，事情是这样的。当我运行这个时，它们确实彼此相邻，但它们不再接触边缘。它们只是悬挂在中间。在HTML文档中，div嵌套在另一个元素中，除了body？实际上我刚刚修复了它。两个div现在都位于body元素中，但顶部导航栏除外。好。但是，一般来说，根据W3C，“元素包含HTML文档的所有内容，例如标题、段落、图像、超链接、表格、列表等。”因此，最好不要在元素之外包含元素。