Bir div içinde bir divi nasıl duyarlı hale getiririm

CSS
, , ,
1

benim bir react projem var cep telefonları için duyarlı hale getiriyorum ilk divim kare o duyarlı oluyor kare içinde h2 etiketim var ama o duyarlı olmuyor yaptıklarım aşağıdaki gibi

page8
page8636×722 8.49 KB

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%;
    }
    
  }