Html CSS内容从Div溢出

我正在尝试以一种博客格式创建我的第一个从头开始的网页。到目前为止，我的页眉/功能/侧边栏/页脚似乎表现良好，但我在两点上遇到了困难。我的导航栏链接不希望保留在导航div中，功能部分中的弹性框也不希望以行的形式出现

导航栏是更令人头痛的问题，因此非常感谢对导航栏的具体帮助。如果你能同时解决这两个问题，那就更好了：）

谢谢大家!

/*------------------------------------*/
/*基本设置*/
/* ----------------------------- */
* {
保证金：0；
填充：0；
框大小：边框框；
最小宽度：0；
最小高度：0；
颜色：rgb（13,56,0）；
}
html{
/*背景色：rgb（179223198）*/
字体系列：“Lato”，“Arial”，无衬线；
/*这是导入的字体*/
字体大小：300；
字体大小：20px；
文本呈现：优化易读性；
滚动行为：平滑；
}
/* ----------------------------- */
/*航行*/
/* ----------------------------- */
.主导航{
显示器：flex；
弯曲方向：行；
列表样式：无；
边缘顶部：55px；
证明内容：中心；
}
主导航李先生{
/*这将选择主导航中的所有li元素*/
显示：内联块；
左边距：40px；
}
.主导航李a：链接，
.主导航李a：已访问{
/*这将选择每个.main nav li元素内的a标记*/
填充：8px0；
文字装饰：无；
文本转换：大写；
字体大小：90%；
边框底部：2倍纯色透明；
过渡：边界底部0.2s；
}
主导航李a：悬停，
.主导航李a：激活{
边框底部：2倍实心rgba（13,56,0,0.933）；
}
#导航{
边框：0.5px实心rgb（94,2,2）；
显示器：flex；
弯曲方向：行；
自我辩护：中心；
宽度：100%；
网格区域：导航；
}
/* ----------------------------- */
/*主网格和柔性网格*/
/* ----------------------------- */
.集装箱{
显示：网格；
宽度：100vw；
高度：100vh；
网格模板列：25%25%25%25%；
网格模板行：5vh 10vh 70vh 10vh；
网格模板区域：“导航导航导航”“页眉”“主侧边栏”“页脚页脚”；
网格间距：5px；
填充：10px；
边框：2倍实心#000000；
证明内容：中心；
}
.盒子{
显示：网格；
证明内容：中心；
对齐项目：居中；
背景色：#ffffff；
}
#b1{
边框：0.5px实心rgb（94,2,2）；
顺序：1；
网格区域：标题；
}
#b2{
边框：0.5px实心rgb（94,2,2）；
顺序：2；
网格区域：主；
}
#b3{
边框：0.5px实心rgb（94,2,2）；
顺序：3；
网格区域：侧栏；
}
#b4{
边框：0.5px实心rgb（94,2,2）；
顺序：4；
网格区域：页脚；
}
/* ----------------------------- */
/*功能柔性*/
/* ----------------------------- */
.特征{
显示器：flex；
弯曲方向：行；
证明内容：中心；
边框：1px实心#000000；
}
#f1{
顺序：1；
}
#f2{
顺序：2；
}
#f3{
顺序：3；
}
#f4{
顺序：4；
}

练习1










这是我的项目的标题页。
一个
两个
三
四
这将是右侧的内容列。
这是我项目的页脚。

。主导航删除页边距顶部和框。将显示更改为显示：flex；这将解决您的问题。

基于@BrentOwen answer这里是工作片段

/*基本设置*/
/* ----------------------------- */
* {
保证金：0；
填充：0；
框大小：边框框；
最小宽度：0；
最小高度：0；
颜色：rgb（13,56,0）；
}
html{
/*背景色：rgb（179223198）*/
字体系列：“Lato”，“Arial”，无衬线；
/*这是导入的字体*/
字体大小：300；
字体大小：20px；
文本呈现：优化易读性；
滚动行为：平滑；
}
/* ----------------------------- */
/*航行*/
/* ----------------------------- */
.主导航{
显示器：flex；
弯曲方向：行；
列表样式：无；
证明内容：中心；
}
主导航李先生{
/*这将选择主导航中的所有li元素*/
显示：内联块；
左边距：40px；
}
.主导航李a：链接，
.主导航李a：已访问{
/*这将选择每个.main nav li元素内的a标记*/
填充：8px0；
文字装饰：无；
文本转换：大写；
字体大小：90%；
边框底部：2倍纯色透明；
过渡：边界底部0.2s；
}
主导航李a：悬停，
.主导航李a：激活{
边框底部：2倍实心rgba（13,56,0,0.933）；
}
#导航{
边框：0.5px实心rgb（94,2,2）；
显示器：flex；
弯曲方向：行；
自我辩护：中心；
宽度：100%；
网格区域：导航；
}
/* ----------------------------- */
/*主网格和柔性网格*/
/* ----------------------------- */
.集装箱{
显示：网格；
宽度：100vw；
高度：100vh；
网格模板列：25%25%25%25%；
网格模板行：5vh 10vh 70vh 10vh；
网格模板区域：“导航导航导航”“页眉”“主侧边栏”“页脚页脚”；
网格间距：5px；
填充：10px；
边框：2倍实心#000000；
证明内容：中心；
}
.盒子{
显示：网格；
证明内容：中心；
对齐项目：居中；
背景色：#ffffff；
}
#b1{
边框：0.5px实心rgb（94,2,2）；
顺序：1；
网格区域：标题；
}
#b2{
边框：0.5px实心rgb（94,2,2）；
顺序：2；
网格区域：主；
}
#b3{
边框：0.5px实心rgb（94,2,2）；
顺序：3；
网格区域：侧栏；
}
#b4{
边框：0.5px实心rgb（94,2,2）；
顺序：4；
网格区域：页脚；
}
/* ----------------------------- */
/*功能柔性*/
/* ----------------------------- */
.特征{
显示器：flex；
弯曲方向：行；
证明内容：中心；
边框：1px实心#000000；
}
#f1{
顺序：1；
}
#f2{
顺序：2；
}
#f3{
顺序：3；
}
#f4{
顺序：4；
}

练习1