Javascript 我无法用css放大对象“div”html

我正在练习一点网页设计。目前我正在复制我在互联网上看到的计时器的设计。我目前正试图在数字时钟屏幕和“重启”按钮（图1）之间创建一个圆圈（红色对象），但我无法放大其大小，以使其占据所有可用空间，因为出于我不理解的原因，它分配了最大空间（图2）

预期设计的草图：

检查项目的当前状态：

我怎样才能解决这个问题

/*导入字体*/
@导入url（'https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap'）；
@字体{
字体系列：“数字7”；
src:url（'./source/digital-7.ttf'）；
}
：根{
/*颜色*/
--白色：#fff；
--浅灰色：#f0f3；
--浅色：#ffffff；
--阴影颜色：#ccccc f；
/*字体*/
--机器人字体：机器人；
--字体粗体：700；
}
身体{
字体系列：“digital-7”，无衬线；
背景：var（--浅灰色）；
}
.页眉{
背景：var（--浅灰色）；
位置：绝对位置；
显示器：flex；
左：30%；
右：30%；
最高：2%；
填充：20px 40px；
边界半径：20px；
盒子阴影：20px 20px 40px var（--阴影颜色），-20px-20px 40px var（--浅色）；
证明内容：之间的空间；
对齐项目：居中；
}
.滴答声{
高度：40px；
填充：0 30px；
字体系列：“Roboto”，无衬线；
字体大小：35px；
颜色：#31546a；
}
.选项{
填充：15px 30px；
背景：var（--浅灰色）；
边界：无；
边界半径：50px；
颜色：#808080；
文本对齐：居中；
大纲：无；
光标：指针；
过渡：0.2s缓进缓出；
盒子阴影：-20px-20px 40px-var（--浅色），20px 20px 40px-var（--阴影色）；
}
.选项：悬停{
盒影：-5px-5px 15px可变值（--浅色），5px 5px 15px可变值（--阴影色）；
}
.选项：活动{
框阴影：插入-3px-3px 10px变量（--浅色），插入3px 3px 10px变量（--阴影色）；
/*背景：var（--浅灰色）；
框阴影：var（--浅灰色）*/
}
.盒子{
位置：绝对位置；
显示器：flex；
证明内容：中心；
左：30%；
右：30%；
最高：5%；
底部：2%；
利润率最高：8%；
背景：var（--浅灰色）；
边界半径：30px；
盒子阴影：20px 20px 40px var（--阴影颜色），-20px-20px 40px var（--浅色）；
填充：15%；
}
.盒式时钟{
填充：15px 30px；
位置：绝对位置；
显示器：flex；
左：10%；
右：10%；
最高：5%；
底部：70%；
背景：var（--浅灰色）；
边界半径：30px；
盒子阴影：20px 20px 40px var（--阴影颜色），-15px-15px 35px var（--浅色）；
}
.数字钟{
位置：绝对位置；
左：8px；
右：8px；
顶部：8px；
底部：8px；
边框：#a8a8a8实心2件；
背景：线性梯度（145度，#cbd3c5，#afbca2）；
边界半径：26px；
}
.时钟显示器{
文本对齐：居中；
颜色：#333631；
}
.时钟场{
利润率最高：-21%；
显示器：flex；
证明内容：中心；
}
.钟场分区{
显示：内联块；
位置：相对位置；
}
.时钟场分区p{
字体大小：90px；
位置：相对位置；
z指数：100；
}
.时钟字段.数字.占位符{
颜色：#adb7a4；
位置：绝对位置；
排名：0；
z指数：50；
}
.时钟字段.数字.类型{
字体大小：15px；
字体大小：粗体；
文本转换：大写；
利润率最高：-118%；
}
.外圈{
高度：25px；
宽度：300px；
背景：rgb（255,46,46）；
盒子阴影：20px 20px 40px var（--阴影颜色），-15px-15px 35px var（--浅色）；
}
.重新开始{
填充：15px 30px；
位置：绝对位置；
边界：无；
边界半径：50px；
底部：5%；
颜色：#808080；
文本对齐：居中；
大纲：无；
光标：指针；
过渡：0.2s缓进缓出；
背景：var（--浅灰色）；
盒子阴影：-20px-20px 40px-var（--浅色），20px 20px 40px-var（--阴影色）；
}
.重新启动：悬停{
盒影：-5px-5px 15px可变值（--浅色），5px 5px 15px可变值（--阴影色）；
}
.重新启动：活动{
框阴影：插入-3px-3px 10px变量（--浅色），插入3px 3px 10px变量（--阴影色）；
}

计时器
计时器
选择权
圆圈
重新启动

强文本

大宗报价

使用：

/*导入字体*/
@导入url（'https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap'）；
@字体{
字体系列：“数字7”；
src:url（'./source/digital-7.ttf'）；
}
：根{
/*颜色*/
--白色：#fff；
--浅灰色：#f0f3；
--浅色：#ffffff；
--阴影颜色：#ccccc f；
/*字体*/
--机器人字体：机器人；
--字体粗体：700；
}
身体{
字体系列：“digital-7”，无衬线；
背景：var（--浅灰色）；
}
.页眉{
背景：var（--浅灰色）；
位置：绝对位置；
显示器：flex；
左：30%；
右：30%；
最高：2%；
填充：20px 40px；
边界半径：20px；
盒子阴影：20px 20px 40px var（--阴影颜色），-20px-20px 40px var（--浅色）；
证明内容：之间的空间；
对齐项目：居中；
}
.滴答声{
高度：40px；
填充：0 30px；
字体系列：“Roboto”，无衬线；
字体大小：35px；
颜色：#31546a；
}
.选项{
填充：15px 30px；
背景：var（--浅灰色）；
边界：无；
边界半径：50px；
颜色：#808080；
文本对齐：居中；
大纲：无；
光标：指针；
过渡：0.2s缓进缓出；
盒子阴影：-20px-20px 40px-var（--浅色），20px 20px 40px-var（--阴影色）；
}
.选项：悬停{
盒影：-5px-5px 15px可变值（--浅色），5px 5px 15px可变值（--阴影色）；
}
.选项：活动{
盒影：插图-3p