Html 无法减小flexbox容器和allign项目中的元素大小

我正在从事一个前端项目，在该项目中，我的网站的

底部有一个
flexbox容器
，我想在其中存储
联系人列表元素
。问题是，我想在我的网站上添加一个
square
徽标作为
flexbox
元素，但我无法正确执行此操作
正确的
显示
如下图所示，旁边带有
红色
徽标，并带有所需大小和文本。
然而，用我的代码，我不能像上图那样改变红方标志的大小，也不能正确地标记我的物品，我似乎找不到什么地方出了问题


。联系部分{
位置：相对位置；
}
.联络货柜{
位置：相对位置；
显示器：flex；
柔性流：行换行；
证明内容：周围的空间；
背景色：黑色；
宽度：100%；
高度：600px；
}
.联络货柜组{
填充：50px；
利润率：10px；
}
.联系集装箱h1、h5{
颜色：白色；
}
地址跨度{
颜色：白色；
}
#地址：之前{
内容：“你需要这样的结果吗？如果需要重做，我会重做


。联系部分{
位置：相对位置；
}
.联络货柜{
位置：相对位置；
显示器：flex；
柔性流：行换行；
证明内容：周围的空间；
背景色：黑色；
宽度：100%；
高度：600px；
}
.联络箱{
显示器：flex；
弯曲方向：行反向；
}
.联络货柜组{
/*填充：50px*/
利润率：10px；
}
.联系集装箱h1、h5{
颜色：白色；
}
地址跨度{
颜色：白色；
}
#地址：之前{
内容：“