Bootstrap 4窄视口导航栏右溢问题求助，新手急求技术建议

我并非专业开发者，是一名失业的平面设计师，正尝试将作品集网站做得比之前的WordPress站点更精致。我通过Dreamweaver基于Bootstrap 4新建页面并完成了大量自定义修改，此前一切正常，但现在出现了核心问题：当页面宽度介于最小尺寸与常规桌面尺寸之间的窄视口状态时（比如手机横屏模式），导航栏会超出容器范围。我不确定这是否与media-query有关，完全不知道该从何处着手解决。

我的网站地址：clareking.net

此外还有两个次要问题希望解决：

• a. 处于最小窄视口状态时，导航栏下方的黑色条带如何拉伸至全屏？
• b. 宽屏状态下，承载横幅与导航栏的容器如何实现全黑背景？

附相关截图说明：

• 窄视口下导航栏超出容器的异常状态
• 最窄视口下存在多余内边距的状态

感谢各位的帮助！

内容的提问来源于stack exchange，提问作者Clare