双垂直面板Hover交互表现不一致问题排查求助

我想实现一个左右分栏的页面布局：页面默认被均分为两个垂直面板，当鼠标悬停在任意一个面板上时，该面板会通过过渡动画展开至页面90%的宽度，另一面板则收缩到10%。

目前右侧的白色面板完全符合预期：hover时它的背景和内部文字会自然覆盖左侧的蓝色面板，交互表现很顺畅。但当我hover左侧的蓝色面板时，奇怪的问题出现了——右侧白色面板的文字会被挤到页面的最右边缘，而不是被展开的蓝色面板完全盖住。

我已经把两个面板的样式设置得完全一致了，试了调整好几个属性都没解决问题，实在摸不着头脑。以下是我的完整代码：

HTML 代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css">
  <link rel="shortcut icon" type="x-icon">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
</head>
<body>
  <div class="panel-container">
    <div class="panel left">
      <div class="centered">
        Text
      </div>
    </div>
    <div class="panel right">
      <div class="centered">
        Text
      </div>
    </div>
  </div>
</body>
</html>

CSS 代码 #

/* Container to hold both panels */
.panel-container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* Shared panel styles */
.panel {
  position: absolute;
  height: 100%;
  top: 0;
  transition: width 3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Left (blue) panel */
.left {
  left: 0;
  width: 50%;
  background: #003153;
  color: white;
}

/* Right (white) panel */
.right {
  right: 0;
  width: 50%;
  background: white;
  color: black;
}

/* Hover states */
.left:hover {
  width: 90%;
}
.left:hover + .right{
  width: 10%;
  text-align: left;
}
.right:hover {
  width: 90%;
}
.right:hover + .left {
  width: 10%;
}

/* Center */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

明明两个面板的交互逻辑应该是完全对称的，为什么实际表现会不一样呢？有没有大佬能帮我排查下问题所在？

内容来源于stack exchange