Почему кнопки в моем приложении реакции выходят за край div?

Question

Я учусь разрабатывать, и один из примеров проектов, над которыми я пытаюсь работать, - это калькулятор. Сам калькулятор работает нормально, но кнопки выходят за пределы контейнера и вываливаются за край калькулятора. CSS не моя специальность, и большинство вещей, которые я могу придумать, чтобы сделать их подходящими, как я хочу, не сработали. Для справки, мне нужна квадратная сетка, которая симметрично вписывается в контейнер, как выглядит настоящий калькулятор. Это мой код:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-image: radial-gradient(#330e62, #0a080f);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  display: block;
  margin: 10px 0;
  padding: 10px;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  opacity: 0.7;
  width: 50px;
  color: #69f0ae;
  border-radius: 50%;
  height: 50px;
}

.display {
  width: 100%;
  margin: 40px;
  padding: 50px;
  font-size: large;
  font-weight: bolder;
  color: #69f0ae;
  font-family: 'Roboto Mono', monospace;
  text-align: right;
  background-image: linear-gradient(315deg, #000000 0%, #414141 74%);
  border-radius: 25px;
  box-shadow: inset 0 0 2.5px 1.25px #00e676, 0 0 3px 1.5px #7cb342, 0 0 3.25px 2.5px #33691e;
  border: 4px solid #69f0ae;
}

.calculator {
  width: 500px;
  height: 700px;
  display: flex;
  flex-wrap: wrap;
  background-color: #4a148c;
  justify-content: center;
  border-radius: 25px;
  box-shadow: 0 0 20px 10px #00e676, 0 0 25px 15px #81c784, 0 0 30px 22.5px #2e7d32;
  border-width: 5px;
  border-style: solid;
  border-color: #69f0ae;
}

.darkerpurple {
  background-color: #330e62;
  border-style: 4px solid;
  border-color: #69f0ae;
  box-shadow: 0 0 4px 2px #00e676, 0 0 5px 3px #81c784, 0 0 6px 4px #2e7d32;
  color: #69f0ae;
  display: block;
  margin: 10px 0;
  padding: 10px;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin: 10px;
  cursor: pointer;
  opacity: 0.7;
  width: 75px;
  color: #69f0ae;
  font-family: 'Roboto Mono', monospace;
  font-weight: bolder;
  border-radius: 50%;
  height: 75px;
}

.lighterpurple {
  background-color: #4a148c;
  border-style: 4px solid;
  border-color: #69f0ae;
  box-shadow: 0 0 4px 2px #00e676, 0 0 5px 3px #81c784, 0 0 6px 4px #2e7d32;
  color: #69f0ae;
  cursor: pointer;
  flex: 1 1 calc(25% - 4px);
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bolder;
  display: block;
  margin: 10px 0;
  padding: 10px;
  width: 100%;
  opacity: 0.7;
  width: 75px;
  font-size: xx-large;
  font-family: 'Roboto Mono', monospace;
  color: #69f0ae;
  border-radius: 50%;
  height: 75px;
}

.numbers-container {
  width: 75%;
}

.operations-container {
  width: 25%;
}

.darkerpurplereset {
  margin-right: 50%
}

<div>HTML update place here please:


  export default class CalculatorButtons extends React.Component {
  render() {
      return (
      <div className="module-border-wrap">
          <div className="calculator">
              <div id="display" className="display">
                  {this.props.formulaEntered} <br/> {this.props.currentValue}
              </div>
              <div className="numbers-container">
                  <button className="darkerpuplereset">Reset</button>
                  {numbers.map(num => (
                      <CalculatorButton className={`darkerpurple ${num === 0 && 'big-h'}`} key={num} keyPressed={num} />
                  ))}
              </div>
              <div className="operations-container">
                  {operations.map(op => (
                    <CalculatorButton className="lighterpurple" key={op} keyPressed={op}/>
                  ))}
              </div>
          </div>
      </div>
      )
    }
  }

</div>

Извините, это трудно прочитать. дисплей - это экран калькулятора, темно-фиолетовый и светло-фиолетовый - оба класса кнопок (один для чисел и один для операций).

Если у кого-то есть предложения, чтобы все кнопки хорошо вписывались в контейнер это было бы отличным подспорьем, спасибо :)