CSS - onhover pulls down div vertically when page width is small

Question

I am working on a site where there is an info icon next to the logo in the center of the page. When hovering over the info icon, a text box displays. For some reason, when the screen width is shorter than around 1300px, the entire logo as well as the info box is pulled down vertically. Not sure what aspect of onhover could be causing this.

I tried to manually move down the info icon with media queries but that is not a good way of doing it.

Here is react component:

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;

and here is CSS for that component:

.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);
  }
}

Any help would be greatly appreciated.

Answer 1

use this style, you have to use position absolute on hidden-info

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