我正在一个网站上工作，在页面中心的徽标旁边有一个信息图标。当鼠标悬停在信息图标上时，会显示一个文本框。由于某种原因，当屏幕宽度短于1300px左右时，整个徽标以及信息框会垂直向下拉。不确定悬停的哪个方面可能导致此问题。
我试图手动向下移动媒体查询的信息图标，但这不是一个很好的方法。
以下是React组分：

function HomeContent() {
  return (
    <>
      <div className="center-div">
        <img src={tenGreenLogo} className="ten-green-logo" alt=""></img>
        <div className="info-div">
          <img src={infoIcon} alt="" className="info-icon"></img>
          <p className="hidden-info">
            The 10Green Score indicates the health of your environment using a
            number from 0 to 10. The higher the score, the healthier your
            environment.
            <br></br>
            <br></br>
            Factors that can reduce your score include unhealthy air quality
            readings and poor environmental monitoring.
          </p>
        </div>
      </div>
      <Globe />
    </>
  );
}

export default HomeContent;

下面是该组件的CSS：

.center-div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 7rem;
  padding-bottom: 0rem;
  scroll-behavior: smooth;
}
.ten-green-logo {
  max-width: 40%;
  animation: transitionIn 1s;
  padding-right: 1rem;
}

.info-div {
  width: 2rem;
  margin-top: auto;
  margin-bottom: 0;
}

.info-icon {
  width: 2rem;
  animation: transitionIn 1s;
}

.hidden-info {
  display: none;
}

.info-icon:hover + .hidden-info {
  display: block;
  position: relative;
  background-color: white;
  padding: 0.6rem;
  border-radius: 5%;
  width: 20rem;
  font-size: 80%;
  right: 7.5rem;
  top: 10.5rem;
}

.info-icon:hover {
  position: relative;
  top: 10.6rem;
}

@keyframes transitionRight {
  from {
    transform: translateX(0rem);
  }
  to {
    transform: translateX(2rem);
  }
}

@keyframes transitionIn {
  from {
    opacity: 0;
    transform: translateY(4rem);
  }
  to {
    opacity: 1;
    transform: translateY(0rem);
  }
}

任何帮助都将不胜感激。