以下网站https://www.thedegreetracker.com/的菜单存在以下问题。菜单似乎比页面的其他部分宽。这导致浏览器窗口底部出现水平滚动条。当一个人滚动（或在非常宽的计算机屏幕上最大化浏览器页面）时，它会导致页面的其他部分（例如横幅和页脚）在您滚动时消失。
通过对比，以下页面没有相同的问题：https://www.thedegreetracker.com/about_us。第二页是我希望第一个页面在横幅和页脚正确调整大小方面工作的方式，而不是水平滚动。
据我所知，两个页面之间的HTML和CSS代码几乎完全相同。我发现的差异似乎没有什么区别。我花了好几个小时试图找出造成这个问题的原因，现在我要求新的眼睛。我正在使用Bootstrap 3和Laravel，因为它的价值。
我希望这是一个简单的解决方案，我只是缺少。您可能会在实际网页上使用Chrome Dev Tools获得更多运气，但下面是两个页面的HTML。据我所知，这两个页面的CSS完全相同。
以下是包含广泛菜单和水平滚动的损坏页面中的代码
view-source:https://www.thedegreetracker.com/login
以下是页面中的代码，菜单，横幅和页脚都能正常工作
答案 0 :(得分：2)
问题出在表单内，而不是菜单上。您错误地使用了表单内的container类（由Bootstrap保留用于设置页面宽度）。
此外，您的表单有一个.container类，但您要覆盖max-width属性。这可能会导致响应问题。在一般情况下，尽量不要触摸框架用于设置内容和布局宽度的类的width，max-width和min-width。如果必须，请使用内部容器。
回到你的问题，你可能根本没有使用任何类来处理表单中的容器。根据经验，尝试使用不会与框架的类名冲突的类名。
要解决您的问题，请从表单中删除container，或者作为此类错误的常规修补程序，添加此CSS：
.container .container {
width: initial;
}