Responsive CSS part breaks in DRUM MACHINE challenge

[jyotirmoydas12]

Hi… I have been struggling with the responsive behaviour while doing the freeCodeCamp’s DRUM MACHINE Challenge of the Front End Libraries Certification.
This is what I am getting on desktop view

And this is what I get on mobile responsive view :

Below is my code (App.js):

import { useEffect, useState } from 'react';
import './App.css'
import Footer from "./Footer/Footer.js"

const App = () => {

    useEffect(()=>{
      document.addEventListener('keydown', (event) => {
        // console.log(event.key)
        trigger(event.key.toUpperCase());
      })
    })

    const [pressedKey, setPressedKey] = useState('')

      const bankTwo = [
        {
          keyCode: 81,
          keyTrigger: 'Q',
          id: 'Chord-1',
          url: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3'
        },
        {
          keyCode: 87,
          keyTrigger: 'W',
          id: 'Chord-2',
          url: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3'
        },
        {
          keyCode: 69,
          keyTrigger: 'E',
          id: 'Chord-3',
          url: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3'
        },
        {
          keyCode: 65,
          keyTrigger: 'A',
          id: 'Shaker',
          url: 'https://s3.amazonaws.com/freecodecamp/drums/Give_us_a_light.mp3'
        },
        {
          keyCode: 83,
          keyTrigger: 'S',
          id: 'Open-HH',
          url: 'https://s3.amazonaws.com/freecodecamp/drums/Dry_Ohh.mp3'
        },
        {
          keyCode: 68,
          keyTrigger: 'D',
          id: 'Closed-HH',
          url: 'https://s3.amazonaws.com/freecodecamp/drums/Bld_H1.mp3'
        },
        {
          keyCode: 90,
          keyTrigger: 'Z',
          id: 'Punchy-Kick',
          url: 'https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3'
        },
        {
          keyCode: 88,
          keyTrigger: 'X',
          id: 'Side-Stick',
          url: 'https://s3.amazonaws.com/freecodecamp/drums/side_stick_1.mp3'
        },
        {
          keyCode: 67,
          keyTrigger: 'C',
          id: 'Snare',
          url: 'https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3'
        }
      ];

    function trigger(element) {
        //alert('You triggered ' + element);
        const audioElement = document.getElementById(element)
        audioElement.play()
        setPressedKey(element)
    }

    return(
        <div className="myContainer" id="drum-machine">
            <div id="display">
                <h1>Drum Machine</h1>
                <p>{pressedKey}</p>
            </div>
            
              {
                bankTwo.map((drumElement) => {
                    return (

                        <div className="drum-pad-area">                                                    
                              <button className="drum-pad" id={drumElement.id} onClick={()=>{trigger(drumElement.keyTrigger)}}>{drumElement.keyTrigger}
                                <audio src={drumElement.url} className="clip" id={drumElement.keyTrigger}/>
                              </button>                                                        
                        </div>                        
                    )
                })
              }    
            
        <Footer />
        </div>

    )
}

export default App

And this is my App.css :

body{
    background-color: #1b1b32;
}

.myContainer{
    display: flex;
    flex-wrap: wrap;
    width: 300px;
    height:300px;
    text-align: center;    
}

#display{
    color: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
}

.drum-pad-area {
    /* display: grid;
    grid-template-columns: 1fr 1fr 1fr;     */
    width: 85px;    
}

.drum-pad {    
    width: 85px;
    height: 80px;    
}

If someone could explain me what to do to achieve the responsiveness (with proper explaination) I would be grateful… Thanks in advance