导航栏居中元素重叠且logo字体大小调整无效如何解决

问题1：居中导航项重叠的原因 #

你给.topnav-centered下的每一个<a>标签都设置了position: absolute和transform: translate(-50%, -50%)，所有链接都会被定位到导航栏的正中心，自然会全部重叠。同时绝对定位的元素脱离了正常文档流，你给.nav-item设置的margin不会生效。

解决方法：

把绝对定位移到.topnav-centered父容器上，flex布局写在父容器即可：

/* 替换原来的.topnav-centered a相关样式 */
.topnav-centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 3rem; /* 按需调整导航项间距，也可以保留原来的.nav-item的margin-left实现间距 */
}
.topnav-centered a {
    float: none;
}

问题2：logo字体大小修改无效的原因 #

有两个原因导致样式被覆盖：

1. 你的自定义style.css引入顺序在Bootstrap之前，Bootstrap的默认样式优先级更高，会覆盖你的自定义样式
2. 你写的.topnav a通用选择器的权重（类选择器+标签选择器）比单独的.nav-logo类选择器高，你设置的4.1rem会被.topnav a里的17px覆盖

解决方法：

1. 调整CSS引入顺序，把自定义样式放到Bootstrap后面：

<!-- 先引入Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- 再引入自定义CSS -->
<link rel="stylesheet" href="style.css" type="text/css">

2. 提升.nav-logo的选择器权重，避免被通用样式覆盖：

/* 替换原来的.nav-logo样式 */
.topnav .nav-logo {
    font-size: 4.1rem;
    font-weight: 400;
    color: #a9a9a9;
    font-family: "Great Vibes", Georgia, serif, system-ui;
    text-decoration: none;
    padding-top: 2rem;
    padding-bottom: 3rem;
}

补充说明：如果你想让.nav-link的字体颜色、大小生效，同样可以把选择器改成.topnav .nav-link提升权重即可。

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