Javascript 相互重叠的分区

我制作了一个侧边栏，它固定在屏幕的左侧。然后问题就来了，上下文的“第一”部分很好，当我尝试添加上下文的第二部分时，它基本上位于第一部分的正上方，而不是下方。我尝试过不同的定位，但它总是要么在上面，要么在屏幕左侧，忽略侧边栏。所以我的问题是，我如何让第二节继续在第一节和第三节下进行，然后当然以同样的方式进行。提前谢谢

正文{
背景色：#fdfd；
字体系列：Arial，“开放式Sans”，无衬线灯，无衬线，“Segoe UI”；
}
#包装纸{
宽度：100%；
身高：100%；
}
#边栏{
背景色：#212528；
位置：固定；
宽度：20%；
身高：100%；
排名：0；
左：0；
溢出：隐藏；
}
#导航{
颜色：#达达达；
显示：块；
最大宽度：100%；
}
#导航ul{
左侧填充：0；
}
#李海军{
列表样式类型：无；
保证金：0；
填充：0.75em 0.75em 0；
文本对齐：居中；
最大宽度：100%；
}
#李导航：悬停{
背景：#333；
}
#李娜{
显示：块；
填充：0.5em0；
}
.链接{
文本对齐：右对齐；
右边距：25%；
字母间距：1px；
}
#欢迎文集{
文本对齐：居中；
字体：斜体；
文本转换：大写；
字号：1em；
边缘顶部：2米；
}
#搜索栏{
宽度：70%；
左边距：自动；
右边距：自动；
填料：1米1米0.5米1米；
文本对齐：右对齐；
}
#搜索栏输入{
最大宽度：95%；
}
#第一节{
位置：固定；
排名：0；
右：0；
宽度：80%；
}
#容器酮{
边际上限：0；
宽度：80%；
身高：100%；
左边距：自动；
右边距：自动；
文本对齐：居中；
边框底部：2个实心#达达；
盒影：插图0-6px0 0#fdfdfd，插图0-8px0#DADADA；
}
#标题{
保证金：6em0 6em0；
}
#标志h1{
颜色：#ed786a；
文本阴影：0.1米0.1米0 rgba（0,0,0,0.1）；
字母间距：13px；
}
#标志p{
边缘顶部：-0.6em；
颜色：#888888；
字母间距：4px；
字号：0.85em；
}
#第二节{
浮动：；
宽度：80%；
排名：0；
右：0；
}
#集装箱二{
宽度：80%；
身高：100%；
左边距：自动；
右边距：自动；
文本对齐：居中；
}

湖边书籍
欢迎来到
湖边图书


家


类别


畅销书


接触


湖边书籍
克里本地书店

现在最畅销的书

根据对我评论的回答，您不希望

第一节

有

位置：固定。我已经把
/*###*/
放在我添加的CSS旁边，并注释掉了任何需要删除的内容

基本上，我在html/body中添加了一些重置规则，然后在
包装中添加了20%的左边距。其他元素只是自然地在它旁边流动


html，正文{/*####*/
保证金：0；
填充：0；
身高：100%；
宽度：100%；
}
身体{
背景色：#fdfd；
字体系列：Arial，“开放式Sans”，无衬线灯，无衬线，“Segoe UI”；
}
#包装纸{
宽度：100%；
身高：100%；
利润率：0.20%；/*####*/
}
#边栏{
背景色：#212528；
位置：固定；
宽度：20%；
身高：100%；
排名：0；
左：0；
溢出：隐藏；
}
#导航{
颜色：#达达达；
显示：块；
最大宽度：100%；
}
#导航ul{
左侧填充：0；
}
#李海军{
列表样式类型：无；
保证金：0；
填充：0.75em 0.75em 0；
文本对齐：居中；
最大宽度：100%；
}
#李导航：悬停{
背景：#333；
}
#李娜{
显示：块；
填充：0.5em0；
}
.链接{
文本对齐：右对齐；
右边距：25%；
字母间距：1px；
}
#欢迎文集{
文本对齐：居中；
字体：斜体；
文本转换：大写；
字号：1em；
边缘顶部：2米；
}
#搜索栏{
宽度：70%；
左边距：自动；
右边距：自动；
填料：1米1米0.5米1米；
文本对齐：右对齐；
}
#搜索栏输入{
最大宽度：95%；
}
#第一节{
/*位置：固定*/
排名：0；
右：0；
宽度：80%；
}
#容器酮{
边际上限：0；
宽度：80%；
身高：100%；
左边距：自动；
右边距：自动；
文本对齐：居中；
边框底部：2个实心#达达；
盒影：插图0-6px0 0#fdfdfd，插图0-8px0#DADADA；
}
#标题{
保证金：6em0 6em0；
}
#标志h1{
颜色：#ed786a；
文本阴影：0.1em 0.1em 0 rgba（0,0,0,0.1）；
字母间距：13px；
}
#标志p{
边缘顶部：-0.6em；
颜色：#888888；
字母间距：4px；
字号：0.85em；
}
#第二节{
浮动：；
宽度：80%；
排名：0；
右：0；
}
#集装箱二{
宽度：80%；
身高：100%；
左边距：自动；
右边距：自动；
文本对齐：居中；
}

欢迎来到湖边图书


家