Django网站中导航栏偏移问题

说明：本文基于 macOS 13（M1 芯片）环境编写，若您使用的是 Windows 系统，部分命令可能略有不同，欢迎根据实际情况灵活调整。

在网站设计中可能会遇到， 导航栏在主页可以正常显示，但是到了其他页面发生偏移。这很有可能是因为CSS导致的。在有了十几个CSS文件时，如果没有进行分门别类，就可能导致这样的情况。

问题解决也很简单，通常修改CSS就可以，所以我们说的不是如何修改CSS文件，而是如何精准地找到问题出现的位置。

首先你已经知道导航栏偏移了，就可以直接打开浏览器的开发者工具，选择元素选择器，然后将鼠标指针（即屏幕上的箭头）移动到问题位置，即导航栏，并点击。下方的开发者工具的元素面板就会用颜色标明是在那一段HTML代码。

但是这段代码可能也不是问题的精确位置，借助开发者工具中的`盒模型`（通常在右边），将鼠标指针移动到盒模型上就可以看见元素的外边距（margin）、内边距（padding）、内容（content），来精准地定位问题出现的具体区域，同时判断是外边距还是内边距造成了问题。

如果这段代码没有问题，我们就可以向上或者向下继续寻找，我在往下寻找中就精准地找到了问题所在，也就确认了是`.container`类出现了问题。
剩下的就很轻松了，在编辑器中找到该页面或该组件对应的CSS文件，修改边距或者修改宽度，就能直接解决问题。当然如果有多个`.container`，你也可以查看类的属性来确认，如：