Circular element overflow issue

 <div className="PageMenuItemContainer">
      <div className="Menu-Item-Content">
          <p>{icon}</p>
          <p>{menu_text}</p>
      </div>          
</div>

 <div className="PageMenuItemContainer">
      <div className="Menu-Item-Content">
          <p>{icon}</p>
          <p>{menu_text}</p>
      </div>          
</div>

.PageMenuItemContainer {
    border: 0.5px solid white;
    border-radius: 50%;
    padding: 10%;
    width: 4%;
    height: 5%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional shadow for depth */
    transition: transform 0.3s; /* Smooth hover effect */
  background-color:aqua;
}

.PageMenuItemContainer:hover{
    transform:scale(1.1);
}

.Menu-Item-Content {
    height: 90%;
    width: 90%; /* Content width as a percentage of the parent */
    text-align: center;
    padding: 0% 0% 70% 0%; 
    color: white;
    font-size: 90%;
}

.PageMenuItemContainer {
    border: 0.5px solid white;
    border-radius: 50%;
    padding: 10%;
    width: 4%;
    height: 5%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional shadow for depth */
    transition: transform 0.3s; /* Smooth hover effect */
  background-color:aqua;
}

.PageMenuItemContainer:hover{
    transform:scale(1.1);
}

.Menu-Item-Content {
    height: 90%;
    width: 90%; /* Content width as a percentage of the parent */
    text-align: center;
    padding: 0% 0% 70% 0%; 
    color: white;
    font-size: 90%;
}