如何调整红色背景样式，使其围绕用户头像四边内边距均等？

我用以下代码构建导航栏，目前红色背景（userProfileWrapper）左侧存在多余空间，无法实现围绕用户头像（userInitials）四边内边距均等的效果，目标效果如下方截图所示。请问如何调整代码实现需求？

当前效果：

目标效果：

HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="navigationContainer fixedHeader">
        <div class="leftContainer">
            <a href='/' class="logoContainer">
               hello
            </a>
        </div>
        <div class="middleContainer">
            <div class="customSelectContainer">
                <select id="lang" placeholder="def">
                    <!-- Options will be added by JS -->
                </select>
            </div>
            <button class="generateButton" onclick="handleGenerateButtonClick()">Auto Generate</button>
        </div>
        <div class="rightContainer">
            <div class="userProfileWrapper" onmouseenter="handleMouseEnter()">
                <div class="userInitials">th</div>
                <div class="dropdown">
                    <div class="content">
                        <div class="list">
                            <p onclick="handleSignOut()" class="title">Sign Out</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS代码 #

.navigationContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 56px;
  background: #fff;
  box-shadow: 0px 1px 0 rgba(57, 71, 81, 0.16);
  flex: 0 0 300px;
  column-gap: 24px;
}

.fixedHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.leftContainer {
  flex: 1;
  padding: 0 16px;
}

.logoContainer {
  cursor: pointer;
}

.middleContainer {
  display: flex;
  gap: 24px;
  align-items: center;
}

.customSelectContainer {
  margin-top: 3px;
  margin-bottom: 3px;
  padding-left: 15px;
}

.rightContainer {
  flex: 1;
}

.userProfileWrapper {
  margin-right: 8px;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  transition: 0.3s;
  background: red;
  padding: 8px;
  box-sizing: border-box;
}

.userProfileWrapper:hover {
  background: rgba(43, 69, 87, 0.08);
}

.userProfileWrapper:hover .dropdown {
  max-height: 1000px;
  overflow: visible !important;
}

.dropdown {
  max-height: 0;
  overflow: hidden;
  transition: overflow 0s 0.3s, all 0.3s;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 372px;
  transform: translate(0, 100%);
  filter: drop-shadow(0px 8px 16px rgba(57, 71, 81, 0.16));
}

.content {
  padding: 4px 0;
  background: #fff;
}

.userInitials {
  background-color: #D9EDFF;
  margin-left: auto;
  font: 14px/20px 'NotoSansBold', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.list {
  cursor: pointer;
}

.list.disabled {
  opacity: 0.5;
  cursor: no-drop;
  user-select: none;
}

.list .title {
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  padding: 8px 16px;
}

问题出在rightContainer和userProfileWrapper的布局设置上，调整以下两处CSS即可实现目标效果：

1. 修改rightContainer样式，让内部元素靠右对齐：

.rightContainer {
  flex: 1;
  display: flex;
  justify-content: flex-end; /* 添加该行 */
}

2. 修改userProfileWrapper和userInitials的样式，消除左侧多余空间：

.userProfileWrapper {
  margin-right: 8px;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  transition: 0.3s;
  background: red;
  padding: 8px;
  box-sizing: border-box;
  width: fit-content; /* 新增：让容器宽度自适应内容 */
}

.userInitials {
  background-color: #D9EDFF;
  /* 移除 margin-left: auto */
  font: 14px/20px 'NotoSansBold', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

调整说明 #

• rightContainer添加justify-content: flex-end后，会让userProfileWrapper自动靠右，避免容器左侧留白。
• userProfileWrapper设置width: fit-content，让容器宽度仅适配内部头像大小，不会拉伸占满rightContainer宽度。
• 移除userInitials的margin-left: auto，该属性会强制头像靠右，导致userProfileWrapper左侧出现多余空间，现在容器本身已经靠右，无需再用margin调整头像位置。

修改后红色背景会均匀包裹在头像四周，与目标效果一致。

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