html表格滚动条在手机端显示,html – 表格导致水平滚动条出现在移动设备上

我的问题是这段代码：

$5.00	$25.00
$10.00	Custom

这个问题在靠近底部的“捐赠表”中.我有4个单选按钮,5,10,25和其他,我希望这些单选按钮显示为2行2列.在chrome(全屏)上,一切看起来都很完美,没有水平滚动条,所有单选按钮看起来都不错,但是当我缩小窗口尽可能小或当我使用我的移动设备时,单选按钮被切断,在我的智能手机上水平滚动条出现(我知道问题是因为屏幕尺寸较小但我似乎无法修复它)当我删除3个单选按钮并且只有1时问题就消失了.我怎么能解决这个问题所以我可以显示4个单选按钮而没有出现水平滚动条？我看了,试过overflow-x：hidden;和一些其他建议的解决方案,但都没有.

任何人都有修复？先感谢您.

如果需要,这是我的CSS代码：

.donations{

margin-top: 15%;

overflow: hidden;

}

.checkboxgroup {

text-align: center;

display: inline-block;

min-width: 150px;

}

.checkboxgroup label {

display: inline-block;

font-size: 20px;

}