Html 上载到域时，我的导航栏的位置会发生变化

以下是导航栏的代码：

HTML:

由于某种原因，当我将导航栏上传到我的github存储库（我从中托管网站）时，导航栏的位置发生了变化

这里的图片显示了它应该是什么样子，它是从我的本地pc上运行的，第二张图片显示了它在域上的样子

你知道为什么会这样吗

---

谢谢

假设您希望导航条水平居中，则需要将

nav

类的边距更新为：

.nav {
    /* other styles */
    margin: 150px auto;
}

---

使用单个值

margin:150px

将左右边距设置为150px，我认为这会导致渲染问题。左/右边距的

auto

值将水平居中。

引导是罪魁祸首。因为您使用的是引导css，所以它会自动为您的导航类.nav分配一些样式。在这种情况下，将为其分配一个导致问题的display:flex属性。您可以替代此选项并输入display:block；o如果您想设计自己的导航区域，我建议您使用不同于.nav的类名

/* NAV BAR */

.nav{
    text-decoration: none;
    list-style: none;
    margin: 150px;
    text-align: center;
}

.nav li{
    display: inline;
}

.nav a{
    display: inline-block;
}

.currentred{
    background-color: blue;
    color: white;
    text-decoration: none;
    font-size: 3.0vw;
    padding: 0px 50px 0px 50px;
    font-family: Impact;
}

.currentred:hover{
    color: white;
}

.currentblue{
    background-color: red;
    color: white;
    text-decoration: none;
    font-size: 3.0vw;
    padding: 0px 50px 0px 50px;
    font-family: Impact;
}

.currentblue:hover{
    color: white;
}

.item{
    color: white;
    text-decoration: none;
    font-size: 3.0vw;
    padding-bottom: 20px;
    padding-left: 50px;
    padding-right: 50px;
    font-family: Impact;
}

.item:hover{
    color: white;
}
/* END NAV BAR */

.nav {
    /* other styles */
    margin: 150px auto;
}