Html 如何在调整浏览器窗口大小时防止部分重叠？

形势

一个包含4个部分的滚动页面

问题

调整大小时，标题和关于部分重叠到下面的部分（&A） 浏览器窗口

使用来自的inspector工具为mobile设计响应性之后 google chrome，我在将项目上传到网上后遇到了一个问题：

请参见演示：

/**--------------------------------------------------
作者：xyz
模板名称：abc
描述：样板
版本：1.0
* -------------------------------------------------  */
@导入url（'https://fonts.googleapis.com/css2?family=Libre+巴斯克维尔&display=swap'）；
html{
宽度：100%；
身高：100%；
字体系列：“自由巴斯克维尔”，无衬线；
线高：1.15；
-webkit文本大小调整：100%；
-ms文本大小调整：100%；
-ms溢出样式：滚动条；
-webkit点击高亮显示颜色：rgba（0,0,0,0）；
}
身体{
宽度：100%；
身高：100%；
字体系列：“自由巴斯克维尔”，无衬线；
字体大小：15px；
线高：1.75；
保证金：0；
文本对齐：左对齐；
背景色：#fff；
字体大小：400；
颜色：#6c5353ff；
}
/*-------------------- -----------------------------------------------------------------------------------
印刷术
-----------------*/
.h1，
.h2，
.h3，
.h4，
.h5，
.h6，
h1，
h2，
h3，
h4，
h5，
h6{
字体系列：“自由巴斯克维尔”，无衬线字体！重要；
字号：700；
线高：1.35；
边缘底部：.5rem；
颜色：#6c5353ff；
}
/*-------------------- -----------------------------------------------------------------------------------
常见风格
-----------------*/
.集装箱{
填充顶部：100px；
垫底：100px
}
部分{
溢出：自动；
}
img{
最大宽度：100%；
高度：自动；
宽度：自动\9；
/*ie8*/
垂直对齐：中间对齐；
边框样式：无；
}
/*-------------------- -----------------------------------------------------------------------------------
标题
-----------------*/
标题{
宽度：100%；
身高：100%；
背景图像：线性梯度（rgb（227、219、219）、rgb（237、230、230））；
文本对齐：居中；
填充：30px；
}
.logo img{
文本对齐：居中；
垂直对齐：中间对齐；
最大宽度：100%；
高度：自动；
}
/*-------------------- -----------------------------------------------------------------------------------
引用
-----------------*/
.引用{
宽度：100%；
身高：100%；
颜色：#6c5353ff；
文本对齐：居中；
字体大小：35px；
填充：30px；
}
/*-------------------- -----------------------------------------------------------------------------------
关于
-----------------*/
#关于{
宽度：100%；
身高：100%；
字体系列：“自由巴斯克维尔”，无衬线字体！重要；
颜色：#6c5353ff；
背景图像：线性梯度（rgb（237，230，230），rgb（244，244，244））；
填充：30px；
}
#关于.标题{
文本对齐：居中；
填充：20px；
}
#大约，排{
填充顶部：100px；
}
#大约h1{
字体大小：35px；
}
#关于p{
字体大小：30px；
边缘底部：50px；
}
#关于img{
最大宽度：100%；
高度：自动；
}
/*-------------------- -----------------------------------------------------------------------------------
接触
-----------------*/
#联系{}
#联系方式h1{
文本对齐：左对齐；
字体大小：35px；
填充底部：50px；
}
.居中对齐{
文本对齐：居中；
}
.行{
利润率：-20px0；
}
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.路.山口{
填充：0 20px；
浮动：左；
框大小：边框框；
}
.第x-50列{
宽度：50%；
}
.世界其他地区第x-100列{
宽度：100%；
}
.内容包装器{
最小高度：100%；
位置：相对位置；
}
.联系{
最大宽度：650px；
保证金：0自动；
位置：相对位置；
最高：50%；
-webkit转换：translateY（-50%）；
转化：translateY（-50%）；
}
.联系.标题{
文本对齐：居中；
字体系列：Raleway，无衬线；
文本转换：大写；
字母间距：3px；
字体大小：36px；
线高：48px；
填充底部：48px；
}
.联系人表单.表单字段{
位置：相对位置；
边际：32px0；
}
.联系方式。输入文本{
显示：块；
宽度：100%；
高度：36px；
边框宽度：0 2px 0；
边框颜色：#6c5353ff；
字体系列：Lusitana，衬线；
字号：18px；
线高：26px；
字体大小：400；
}
.联系人表单。输入文本：焦点{
大纲：无；
}
.联系人表单。输入文本：焦点+.标签，
.联系人表单.输入文本.不为空+.标签{
-webkit转换：translateY（-24px）；
转换：translateY（-24px）；
}
.联系方式.标签{
位置：绝对位置；
左：20px；
底部：11px；
字体系列：“自由巴斯克维尔”，无衬线字体！重要；
字号：18px；
线高：26px；
字体大小：400；
颜色：#888；
光标：文本；
-webkit转换：-webkit转换。2轻松输入输出；
转换：-webkit转换。2轻松输入输出；
转换：转换。2s轻松输入输出；
转换：transform.2s ease in out，-webkit transform.2s ease in out；
}
.联系表格.提交btn{
显示：内联块；
背景色：#6c5353ff；
颜色：#fff；
字体系列：“自由巴斯克维尔”，无衬线字体！重要；
文本转换：大写；
字母间距：2px；
字体大小：16px；
线高：24px；
填充：8px 16px；
边界：无；
光标：指针；
}
.注{
位置：绝对位置；
左：0；
底部：10px；
宽度：100%；
文本对齐：居中；
字体系列：Lusitana，衬线；
字体大小：16px；
线高：21px；
}
.note.link{
颜色：#888；
文字装饰：无；
}
。注意。链接：悬停{
文字装饰：下划线；
}
/*-------------------- -----------------------------------------------------------------------------------
页脚
-----------------*/
#足p{
文本对齐：居中；
字体大小：15px；
垫底：1px；
字体系列：“自由巴斯克维尔”，无衬线字体！重要；
}
/*-------------------- -----------------------------------------------------------------------------------
反应敏捷的
----------