Html 如何正确保留div之间的空间？

每当我切换到移动视图时，这两个div就会互相拥抱。最好的办法是什么来保留这两个div之间的空间，这样当我切换到mobile时，它看起来与桌面版本相同？我不希望使用媒体查询

*{
框大小：边框框；
保证金：0；
填充：0；
}
身体{
高度：100vh；
显示器：flex；
对齐项目：居中；
对正内容：空间均匀；
背景色：rgb（73,73,73）；
}
.集装箱{
高度：60vh；
宽度：40vh；
背景色：rgb（213，213，213）；
边界半径：3vh；
滤镜：投影（1vh 1.2vh 0.5vh rgb（38,38,38））；
}
.记分牌{
高度：20vh；
宽度：40vh；
背景色：rgb（213，213，213）；
边界半径：2vh；
滤镜：投影（1vh 1.2vh 0.3vh rgb（38,38,38））；
}

文件

您可以使用固定大小（如

px

）来修复此空间。只需将主体

对齐content:center

，并在

容器中添加一个
右边距


*{
框大小：边框框；
保证金：0；
填充：0；
}
身体{
高度：100vh；
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景色：rgb（73,73,73）；
}
.集装箱{
高度：60vh；
宽度：40vh；
右边距：100px；/*在此处添加间距值*/
背景色：rgb（213，213，213）；
边界半径：3vh；
滤镜：投影（1vh 1.2vh 0.5vh rgb（38,38,38））；
}
.记分牌{
高度：20vh；
宽度：40vh；
背景色：rgb（213，213，213）；
边界半径：2vh；
滤镜：投影（1vh 1.2vh 0.3vh rgb（38,38,38））；
}

文件