我正在学习开发，我正在尝试的一个示例项目是一个计算器。 计算器本身工作正常，但按钮溢出容器，溢出计算器边缘。 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>

很抱歉这很难读。 显示器是计算器的屏幕，较深的紫色和较浅的紫色都是按钮类（一个表示数字，一个表示操作）。

如果有人有任何建议，使按钮都很好地适合容器，这将是一个惊人的帮助，谢谢:）