Html Bootstrap 4容器d-flex重叠

我正在用Bootstrap 4开发我的投资组合，我在works部分遇到了问题。在移动大小下测试时，工作部分与接触部分重叠

原因是什么？解决办法是什么？我知道这与Bootstrap的flex行为有关，但我已经做了研究，并没有找到问题所在

提前谢谢

/*
*Pablo Herrero的作品集|由Pablo Herrero制作| Pabloherro.me
*版权2020 Pablo Herrero |麻省理工学院许可证
*/
/*字体*/
@字体{
字体系列：“fira_coderegular”；
src:url（'font/firacode regular-webfont.woff2'）格式（'woff2'）、url（'font/firacode regular-webfont.woff'）格式（'woff'）；
字体大小：正常；
字体风格：普通；
}
@字体{
字体系列：“fira_codebold”；
src:url（'font/firacode bold webfont.woff2'）格式（'woff2'）、url（'font/firacode bold webfont.woff'）格式（'woff'）；
字体大小：正常；
字体风格：普通；
}
@字体{
字体系列：“fira_Codemedia”；
src:url（'font/firacodemediatewebfont.woff2'）格式（'woff2'）、url（'font/firacodemediatewebfont.woff'）格式（'woff'）；
字体大小：正常；
字体风格：普通；
}
/*一般的*/
身体{
位置：相对位置；
字体系列：“fira_coderegular”；
字母间距：正常；
溢出y：滚动；
背景色：#ffffff；
}
正文：：-webkit滚动条{
显示：无；
}
/*导航栏*/
#导航栏{
最小高度：56px；
背景色：透明；
边框底部：无；
}
#导航栏。导航栏切换器{
颜色：#000000；
}
#导航栏。导航栏切换器：焦点{
大纲：无；
}
#h{
字号：28px；
字体系列：“fira_codebold”；
文本对齐：居中；
颜色：#000000；
大纲：无；
}
#导航栏。导航链接{
字体大小：14px；
字体系列：“fira_Codemedia”；
填充：1雷姆1.5雷姆；
文本对齐：居中；
颜色：#ffffff；
背景色：#000000；
大纲：无；
}
#导航栏。导航链接：悬停{
颜色：#bd93f9；
大纲：无；
}
#导航栏。导航链接。激活{
颜色：#50fa7b；
大纲：无；
}
#导航栏#h：悬停{
颜色：#bd93f9；
大纲：无；
}
#导航栏h：激活{
颜色：#50fa7b；
大纲：无；
}
@介质（最小宽度：992px）{
#h{
字体大小：32px；
}
#导航栏。导航链接{
字体大小：16px；
填充：0.5雷姆0雷姆0.5雷姆3雷姆；
颜色：#000000；
背景色：透明；
}
}
/*标题*/
#标题{
宽度：100%；
高度：100vh；
}
#标题.容器{
最小高度：100%；
最小高度：100vh；
对齐项目：居中；
}
#标题col-sm-12{
文本对齐：居中；
}
#标题#标题照片{
文本对齐：居中；
最大宽度：100%；
}
#收割台h1{
保证金：50px 0px 0px 0px；
宽度：100%；
文本对齐：居中；
文本转换：大写；
字体系列：“fira_codebold”；
字体大小：64px；
线高：3.3rem；
字母间距：0.05雷姆；
}
#收割台h2{
利润率：15px 0px 0px 0px；
宽度：100%；
文本对齐：居中；
文本转换：大写；
字体系列：“fira_Codemedia”；
字体大小：32px；
字母间距：0.05雷姆；
}
@介质（最小宽度：992px）{
#标题#标题照片{
最大宽度：35%；
}
#收割台h1{
保证金：25px 0px 0px 0px；
字体大小：72px；
线高：3.3rem；
字母间距：0.05雷姆；
}
#收割台h2{
利润率：15px 0px 0px 0px；
字体大小：36px；
字母间距：0.05雷姆；
}
}
/*关于*/
#关于{
宽度：100%；
高度：100vh；
}
#关于.集装箱{
最小高度：100%；
最小高度：100vh；
对齐项目：居中；
}
#大约，排{
背景色：#000000；
填充：5vh 0vh 5vh 0vh；
保证金：1vh 0vh 1vh 0vh；
}
#大约h2{
宽度：100%；
文本对齐：左对齐；
边缘底部：30px；
字体系列：“fira_Codemedia”；
字体大小：32px；
颜色：#ffffff；
字母间距：0.05雷姆；
}
#关于p{
宽度：100%；
文本对齐：左对齐；
字体系列：“fira_coderegular”；
字体大小：16px；
颜色：#ffffff；
}
@介质（最小宽度：992px）{
#大约，排{
背景色：#000000；
填充：15vh 10vh 15vh 10vh；
保证金：1vh 0vh 1vh 0vh；
}
#大约h2{
文本对齐：左对齐；
边缘底部：30px；
字体大小：36px；
}
#关于p{
文本对齐：左对齐；
字号：18px；
}
}
/*工作*/
#工作{
宽度：100%；
高度：100vh；
}
#工厂，集装箱{
最小高度：100%；
最小高度：100vh；
对齐项目：居中；
}
#作品，col-sm-4{
高度：35vh；
背景色：#000000；
边框：3vh纯白；
}
#工程h2{
宽度：100%；
文本对齐：居中；
边缘底部：30px；
字体系列：“fira_Codemedia”；
字体大小：32px；
颜色：#000000；
字母间距：0.05雷姆；
}
#作品h3{
宽度：100%；
填充顶部：10px；
文本对齐：左对齐；
字体系列：“fira_Codemedia”；
字号：26px；
颜色：#ffffff；
字母间距：0.05雷姆；
}
#作品p{
文本对齐：左对齐；
字体系列：“fira_coderegular”；
字体大小：16px；
颜色：#ffffff；
}
#工作。col-sm-4 i{
字体大小：16px；
颜色：#ffffff；
}
#人力资源部{
边框颜色：#ffffff；
}
#工作，
#我工作得很好{
颜色：#000000；
文字装饰：未设置；
}
#作品h3：悬停{
颜色：#bd93f9；
}
#作品h3：活动{
颜色：#50fa7b；
大纲：无；
}
#作品a：悬停{
颜色：#bd93f9；
}
#作品a：活动{
颜色：#50fa7b；
大纲：无；
}
@介质（最小宽度：992px）{
#工程h2{
文本对齐：居中；
边缘底部：30px；
字体大小：36px；
}
#作品h3{
文本对齐：左对齐；
字体大小：30px；
}
#作品p{
文本对齐：左对齐；
字号：18px；
}
#作品一{
字号：18px；
}
}
/*接触*/
#接触{
宽度：100%；
高度：100vh；
}
#联系，集装箱{
最小高度：100%；
最小高度：100vh；
}
#触点h2{
宽度：100%；
文本对齐：居中；
边缘底部：30px；
字体系列：“fira_Codemedia”；
字体大小：32px；
颜色：#000000；
字母间距：0.05雷姆；
}
#联系人表单输入，
#联系方式文本区，
#contactForm按钮{
背景色：#000000；
边界半径：0%；
}
#contactForm输入：：占位符，
#contactForm textarea:：占位符，
#骗局