React项目中NavBar链接无法定位至正确位置的问题求助

我正在开发一个学校项目——Facebook克隆网页应用，刚完成导航栏制作，但无法将「Home」和「Profile」链接调整到正确位置。

当前导航栏样式：

期望的导航栏样式：

问题分析 #

当前布局的核心问题在于navBarRight和navBarLinks的Flex属性设置不合理，导致元素排列不符合预期。只需调整CSS的Flex布局规则，就能让元素按目标样式排列。

修改后的CSS代码 #

.navBarBox{
    height: 50px;
    width: 100%;
    background-color: #3b5998;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
}

.navBarLeft{
    flex: 3;
}

.navBarCenter{
    flex: 5;
}

.navBarRight{
    flex: 4;
    display: flex;
    align-items: center;
    /* 替换居中对齐，改为两端分配空间 */
    justify-content: space-between;
    padding: 0 15px;
    color: white;
}

.navBarLinks{
    /* 转为Flex容器，让内部元素横向排列 */
    display: flex;
    align-items: center;
    gap: 20px; /* 控制Home、Profile与图标组的间距 */
    font-size: 15px;
}

.navBarLink{
    cursor: pointer; /* 添加鼠标悬停指针效果 */
}

.navBarIcons{
    display: flex;
    align-items: center;
    gap: 15px; /* 调整图标之间的间距 */
}

.navBarIcon{
    position: relative; /* 让消息标签正确定位 */
    cursor: pointer;
}

.iconTag{
    /* 修复消息标签的定位样式 */
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: red;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.profilePicImg{
    width: 38px;
    height: 38px; /* 改为正方形，让圆形头像更规整 */
    object-fit: cover;
    border-radius: 50%;
    cursor: pointer;
}

.logo{
    font-size: 35px;
    margin-left: 10px;
    font-weight: bold;
    color: white;
    cursor: pointer;
}

.searchBarBox{
    width: 100%;
    height: 30px;
    background-color: white;
    border-radius: 30px;
    display: flex;
    align-items: center;
}

.serachIcon{
    margin-left: 10px;
}

.searchInput{
    border: none;
    width: 80%;
    outline: none;
}

关键调整说明 #

1. 将navBarRight的justify-content: center改为justify-content: space-between，让内部链接、图标组和头像自动分配空间
2. 给navBarLinks添加display: flex，让Home、Profile和图标组横向排列
3. 通过gap属性控制元素间距，替代零散的margin设置，布局更整洁
4. 修复消息标签的定位样式，让小红点显示在图标右上角
5. 调整头像尺寸为正方形，优化圆形显示效果

修改后，导航栏会按照「Home → Profile → 图标组 → 头像」的顺序排列，完全匹配你期望的样式。

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