Odin Project Flex Header练习：复制解决方案代码未达预期求助

我正在完成The Odin Project的CSS练习仓库中<03-flex-header-2>练习。参考官方提供的代码修改后，页面效果仍不符合<desired-outcome.png>的预期——logo与链接应完全居header左侧，通知按钮和紫色圆形应完全居右侧。复制了解决方案代码却无法得到相同效果，以下是我的代码及浏览器显示截图，恳请帮忙排查：

我的代码 #

CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Besley:ital,wght@0,400;1,900&display=swap');
body {
  margin: 0;
  background: #eee;
  font-family: Besley, serif;
}

.header {
  background: white;
  border-bottom: 1px solid #ddd;
  box-shadow: 0 0 8px rgba(0, 0, 0, .1);
  // lines below added from the solution code
  display: flex;
  justify-content: space-between;
  padding: 8px;
}

// lines below added from the solution code
.left,
.right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-image {
  background: rebeccapurple;
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, .5);
  border-radius: 50%;
  width: 48px;
  height: 48px;
}

.logo {
  color: rebeccapurple;
  font-size: 32px;
  font-weight: 900;
  font-style: italic;
}

button {
  border: none;
  border-radius: 8px;
  background: rebeccapurple;
  color: white;
  padding: 8px 24px;
}

a {
  text-decoration: none;
  color: rebeccapurple;
  padding: 8px;
}

ul {
  list-style-type: none;
  // lines below added from the solution code
  display: flex;
  margin: 0;
  padding: 0;
  gap: 16px;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Header 2</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="header">
    <div class="left-side">
      <div class="logo">
        LOGO
      </div>
      <ul class="links">
        <li><a href="google.com">link-one</a></li>
        <li><a href="google.com">link-two</a></li>
        <li><a href="google.com">link-three</a></li>
      </ul>
    </div>
    <div class="right-side">
      <button class="notifications">
          1 new notification
        </button>
      <div class="profile-image"></div>
    </div>
  </div>
</body>

</html>

浏览器显示效果截图 #

解决方法 #

问题出在类名不匹配：CSS中定义的容器类是.left和.right，但HTML里对应的容器用的是.left-side和.right-side，导致Flex布局样式没有应用到正确的元素上。

你有两种修改方式：

• 方式一：修改HTML，将<div class="left-side">改为<div class="left">，<div class="right-side">改为<div class="right">；
• 方式二：修改CSS，将.left, .right替换为.left-side, .right-side。

修改后，配合.header的justify-content: space-between属性，就能实现logo和链接居左、按钮和头像居右的预期布局。

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