如何使固定的div响应？

问：

我无法使固定的 div 元素响应。

该元素如下图所示：.fixed

在此处输入图像描述

Next js 页面的布局为：

.layout {
  padding: 3%;
  max-width: 100%;
  width: 1455px;
  margin: 0 auto;
}

<div className="flex space-between my8">
  {isFixed && <div className={styles.fixed}></div>}
  <div className={styles.mainContent}></div>
  <div className={styles.contactCard}></div>
</div>

而这种风格：

.mainContent {
  width: 70%;
}

.contactCard {
 width: 30%;
}

.fixed {
  position: fixed;
  top: 2rem;
  width: 60%;
  z-index: 99;
  margin: 0 auto;
  max-width: 1455px;
}