how can i make div responsive for div – Html

I have a div inside a div, my first div is a square, inside this frame I have a h2 tag, my frame works fine on mobile and browser, but when I shrink my h2 tag it stays outside the frame, inside the frame how can I make the h2 tag responsive

picture

home.js:

function Home() {

  return (
    <div className="home-page">

      <div className="home-header">

        <div className='home-first>
          <h2>BAROO</h2>
      
        </div>
      </div>
    </div>


  )
}

export default Home

Home.css:

.home-page {
    display: flex;
    flex-direction: column;
    flex: 0.65;
    max-width: 100%;
    width: 100%;
    background-color: #00ACFE;
  }

.home-header {
    flex-direction: column;
    display: flex;
    border-radius: 20px;
    background-color: rgb(200, 244, 244);
    max-width: 90%;
    margin-left: 65px;
    margin-top: 0px;
    height: 700px;
    width: 100%;
  }

  
  h2 {
    font-size: 100px;
  
    transform: translate(-50%, -50%);
    margin-left: 700px;
    margin-top: 200px;
  }
  @media screen and (max-width: 800px) {
    .home-header {
      max-width: 90%;
      margin-left: auto;
      margin-right: auto; 
      
    }
    .home-first >h2{
      font-size: 100px;
      width: 100%;
    }
    
  }