Html 缩放时如何将按钮保持在div内？

在缩放窗口或移动视图时，希望保持相同的按钮布局。由于某些原因，按钮不会停留在div内，并且在大约1160px的宽度之后重新排列

而且字母的比例也不成比例，即使我用的是大众汽车，也不再在按钮内居中

希望有人能帮我，谢谢

html，正文{
填充：0；
保证金：0；
身高：100%；
}#
键盘{
位置：绝对位置；
宽度：40 vw；
右图：6辆大众汽车；
前7名：大众；
}#
零{
位置：相对位置；
左：4.8大众；
}
.btn{
边界半径：1.5 vw；
字体大小：3VW；
宽度：4.5 vw；
背景色：rgb（26,26,26）；
边框颜色：rgb（51,51,51）；
边界宽度：0.5 vw；
颜色：rgb（255、208、0）；
文本对齐：居中；
字体-系列：“微克马”；
文本阴影：0.5 vw#ff7b00；
利润率：0.1大众；
利润率-顶部：0.2大众；
利润率-底部：0.2 vw；
}
.btn2{
边界半径：1.5 vw；
字体大小：2VW；
最小宽度：10 vw；
背景色：rgb（26,26,26）；
边框颜色：rgb（51,51,51）；
边界宽度：0.5 vw；
颜色：rgb（255、208、0）；
字体-系列：“微克马”；
文本阴影：0.5 vw#ff7b00；
利润率：0.1大众；
位置：相对位置；
左：3辆大众汽车；
}

O
N
G
R
B
7.
8.
9
X
Z
U
W
C
4.
5.
6.
我
K
E
F
Y
1.
2.
3.
M
s
T
L
J
0
P
Q
D
A.
v
H
空间
删除
清楚的

使用而不是

div

html，正文{
填充：0；
保证金：0；
身高：100%；
}
#键盘{
位置：绝对位置；
宽度：40vw；
右：6vw；
头名：7vw；
}
.btn{
边界半径：1.5vw；
字体大小：3vw；
宽度：4.5vw；
背景色：rgb（26,26,26）；
边框颜色：rgb（51,51,51）；
边框宽度：0.5vw；
颜色：rgb（255、208、0）；
文本对齐：居中；
字体系列：“microgmma”；
文本阴影：0.5vw#ff7b00；
利润率：0.1vw 0.2vw；
}
.最大btn{
最小宽度：10vw；
字体大小：2vw；
}
.btn占位符{
宽度：4.5vw；
}

O
N
G
R
B
7.
8.
9
X
Z
U
W
C
4.
5.
6.
我
K
E
F
Y
1.
2.
3.
M
s
T
L
J
0
P
Q
D
A.
v
H
空间
删除
清楚的

您可以使用此属性：

#firstLine ,
#secondLine ,
#thirdLine ,
#fourthLine ,
#fifthLine ,
#sixthLine {
  white-space: nowrap
}

或使用此属性：

#firstLine ,
#secondLine ,
#thirdLine ,
#fourthLine ,
#fifthLine ,
#sixthLine {
    display: flex;
}