Html 为什么我的react应用程序中的按钮溢出div的边缘？

我正在学习开发，我正在尝试的一个示例项目是计算器。计算器本身工作正常，但按钮溢出容器，溢出计算器边缘。CSS不是我的专长，我能想到的让它们适合我的大多数方法都没有奏效。作为参考，我想要一个正方形的网格对称地装入容器中，就像实际的计算器一样。这是我的代码：

*{
框大小：边框框；
}
身体{
保证金：0；
背景图像：径向梯度（#330e62，#0a080f）；
最小高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.按钮{
显示：块；
利润率：10px0；
填充：10px；
宽度：100%；
对齐项目：居中；
证明内容：中心；
字体大小：20px；
不透明度：0.7；
宽度：50px；
颜色：#69f0ae；
边界半径：50%；
高度：50px；
}
.展示{
宽度：100%；
利润率：40像素；
填充：50px；
字体大小：大号；
字体大小：粗体；
颜色：#69f0ae；
字体系列：“Roboto Mono”，monospace；
文本对齐：右对齐；
背景图像：线性梯度（315度，#0000000%，#4174%）；
边界半径：25px；
盒影：插入0 0 2.5px 1.25px 00e676，0 0 3px 1.5px 7cb342，0 0 3.25px 2.5px 33691e；
边框：4px实心#69f0ae；
}
.计算器{
宽度：500px；
高度：700px；
显示器：flex；
柔性包装：包装；
背景色：#4a148c；
证明内容：中心；
边界半径：25px；
盒影：0 0 20px 10px 00e676，0 0 25px 15px 81c784，0 0 30px 22.5px 2e7d32；
边框宽度：5px；
边框样式：实心；
边框颜色：#69f0ae；
}
.深紫色{
背景色：#330e62；
边框样式：4px实心；
边框颜色：#69f0ae；
盒影：0 0 4px 2px#00e676，0 0 5px 3px#81c784，0 0 6px 4px#2e7d32；
颜色：#69f0ae；
显示：块；
利润率：10px0；
填充：10px；
宽度：100%；
对齐项目：居中；
证明内容：中心；
字体大小：20px；
利润率：10px；
光标：指针；
不透明度：0.7；
宽度：75px；
颜色：#69f0ae；
字体系列：“Roboto Mono”，monospace；
字体大小：粗体；
边界半径：50%；
高度：75px；
}
.打火机{
背景色：#4a148c；
边框样式：4px实心；
边框颜色：#69f0ae；
盒影：0 0 4px 2px#00e676，0 0 5px 3px#81c784，0 0 6px 4px#2e7d32；
颜色：#69f0ae；
光标：指针；
弹性：1 1计算（25%-4倍）；
对齐项目：居中；
证明内容：中心；
字体大小：20px；
字体大小：粗体；
显示：块；
利润率：10px0；
填充：10px；
宽度：100%；
不透明度：0.7；
宽度：75px；
字体大小：xx大号；
字体系列：“Roboto Mono”，monospace；
颜色：#69f0ae；
边界半径：50%；
高度：75px；
}
.货柜编号{
宽度：75%；
}
.操作容器{
宽度：25%；
}
.darkerpurplereset{
保证金权利：50%
}

HTML更新位置请点击此处：
导出默认类CalculatorButtons扩展React.Component{
render（）{
返回(
{this.props.formulaEntered}
{this.props.currentValue}
重置
{numbers.map（num=>(
))}
{operations.map（op=>(
))}
)
}
}

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

---

如果有人有任何建议，使所有按钮都能很好地放入容器中，这将是一个惊人的帮助，谢谢：）

显示呈现的HTML也是为了最好地让我们提供帮助。请不要只是一个屏幕截图，因为我们无法将其作为HTML“代码”阅读好的，我添加了HTML片段谢谢提醒我只是一个建议，我将从这里删除所有react，并将它呈现的HMTL放在这里，这样您就可以将react代码的行为与需要CSS的可视元素分离。更多的人将能够快速回答可行的答案，如果他们不必在这里作出反应的工作。