Html 如何使布局正确缩放？

我是一个新手程序员，试图学习Bootstrap4的伸缩性。我必须把这些盒子适当缩小。我已经做了12个小时了。我试过Ul-Li，div集装箱，但运气不好

如果有人能指出我错在哪里，我将不胜感激

我还在最底部添加了一些示例，说明页面在不同屏幕大小下的外观

再次感谢

抢劫

/*
颜色：
#4aaaa5 这是代码。希望它能帮助你。我换成了整个密码。如果有任何变化，请告诉我


html，
身体{
身高：100%；
宽度：100%；
字体系列：“Poppins”、“sans serif”；
颜色：#222；
背景：#D4；
}
.投资组合{
背景：#D4；
}
robTitle先生{
填充物：1.5雷姆1雷姆；
背景色：#4aaaa5；
颜色：#ffffff；
字体系列：'Georgia'，Times，'Times New Roman'，衬线；
宽度：300px；
页边距底部：0；
}
navbar先生{
填充：0；
证明内容：柔性端！重要；
}
罗布图像{
宽度：35%；
高度：自动；
}
.contentBackPort h3{
文本对齐：左对齐；
边缘底部：20px；
}
.navStyle{
背景色：白色；
边框底部：2个实心#CCCC；
证明内容：之间的空间；
对齐项目：居中；
}
.导航链路{
颜色：#777777；
}
.主要背景{
背景图像：url（../images/swirl_pattern.png）；
背景重复：重复；
}
.contentBack{
背景色：#ffffff；
左边距：15px；
右边距：15px；
利润上限：70像素；
填充顶部：20px；
边框：2个实心#dddddd；
}
boxback先生{
证明内容：中心；
}
.contentBackPort{
背景色：#ffffff；
填充顶部：20px；
边框：2个实心#dddddd；
证明内容：中心；
宽度：100%；
边缘顶部：90像素；
}
.contentText{
字距：.25em；
线高：1.5em；
填充顶部：8px；
颜色：#777777；
字体系列：“Arial”，“Helvetica Neue”，Helvetica，无衬线；
}
.标题行{
边框：1px实心#777777；
}
.内容标题{
颜色：#4aaaa5；
字体系列：'Georgia'，Times，'Times New Roman'，衬线；
}
.wordGuessBox{
高度：200px；
背景图像：url（'https://dummyimage.com/300x250/000/fff.png');
位置：相对位置；
背景尺寸：封面；
背景重复：无重复；
}
.rpgBox{
高度：200px；
背景图像：url（'https://dummyimage.com/300x250/ff00ff/fff.png');
位置：相对位置；
背景尺寸：封面；
背景重复：无重复；
}
.信息箱{
高度：200px；
背景图像：url（'https://dummyimage.com/300x250/ff00ff/fff.png');
位置：相对位置；
背景尺寸：封面；
背景重复：无重复；
}
.三角盒{
高度：200px；
背景图像：url（'https://dummyimage.com/300x250/ff00ff/fff.png');
位置：相对位置；
背景尺寸：封面；
背景重复：无重复；
}
.rpsBox{
高度：200px；
背景图像：url（'https://dummyimage.com/300x250/ff00ff/fff.png');
位置：相对位置；
背景尺寸：封面；
背景重复：无重复；
}
.boxText{
颜色：白色；
背景色：#4aaaa5；
填充：10px；
位置：绝对位置；
宽度：100%；
底部：0px；
}
保险商实验室{
保证金：0自动；
背景色：白色；
列表样式：无；
显示：网格；
网格模板列：重复（自动填充，最小值（200px，1fr））；
栅隙：20px；
左侧填充：0；
}
页脚{
背景色：#666666；
颜色：#d5d5d5；
填充顶部：40px；
宽度：100%；
字体系列：“Arial”，“Helvetica Neue”，Helvetica，无衬线；
}
.页脚线{
背景色：#4aaaa5；
高度：70像素；
宽度：100%；
}
@媒体屏幕和屏幕（最大宽度：767px）{
robTitle先生{
宽度：自动；
字体大小：20px；
左边距：0；
}
}
@媒体屏幕和屏幕（最大宽度：567px）{
navbar先生{
填充：0；
证明内容：中心！重要；
}
.contentBackPort{
边缘顶部：145px；
}
}

罗布·康诺利的投资组合
罗布·康诺利
对开


猜单词



RPG游戏



琐事游戏


信息小部件



石头剪刀




&抄袭；罗布·康诺利
好的，下面是我所做的

感谢@Revti让我走上正轨


@媒体屏幕和（最大宽度：767px）{
.wordGuessBox{
高度：300px；
背景图像：url（'https://dummyimage.com/300x250/000/fff.png');
位置：相对位置；
背景尺寸：封面；
背景重复：无重复；
利润率：30像素；
}
.rpgBox{
高度：300px；
背景图像：url（'https://dummyimage.com/300x250/ff00ff/fff.png');
位置：相对位置；
背景尺寸：封面；
背景重复：无重复；
利润率：30像素；
}
.信息箱{
高度：300px；
背景图像：url（'https://dummyimage.com/300x250/ff00ff/fff.png');
位置：相对位置；
背景尺寸：封面；
背景重复：无重复；
利润率：30像素；
}
.三角盒{
高度：300px；
背景图像：url（'https://dummyima