Html 当我缩放页面或提供更多文本时，文本从框中出来，图像图标没有正确对齐

当我缩放页面，显示更多文本时，文本从框中出来，图像图标向外移动。我放了两张屏幕截图，第一张图像是我在编码下面的代码和 第二个图像是例外输出 请帮我做这件事，提前谢谢

这是Css代码，当我缩放页面时，文本会从框中出来，图像图标会移出。
.柔性容器{
显示器：flex；
溢出-x：自动；
}
.officeflex{
利润率：10px；
填充：20px；
}
人力资源{
显示：块；
高度：1px；
边界：0；
边框顶部：1px实心#ccc；
利润率：1米0；
填充：0；
}
.d-flex.align-items-start.summary{
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
保证金：自动；
最大宽度：1170px；
宽度：100%；
}
.将项目对齐到中心{
.尺寸{
字体大小：12px；
}
}
.办公地址标题{
.地址{
颜色：灰色；
字体大小：12px；
}
}
.办公地址详情{
mr-2{
颜色：rgb（0195255）；字体大小：20px
}
}
.个人资料详情{
左边距：15px；
填充：40px；
.姓名{
字体大小：12px；
线高：22px；
字号：500；
}
.名称{
字体大小：12px；
线高：25px；
字体大小：400；
}
.电话{
字体大小：12px；
字号：100；
}
}
.btn{
字体大小：12px！重要；
背景色：#0076C8；
颜色：#FFFFFF；
}

这是HTML代码，当我缩放页面时，文本从框中出来，图像图标移出。
简介摘要

对于图像和图标，在图像和图标上加一个外部div。并将此css应用于它们

imgae图标的外部div{位置：相对；显示：块；高度：300px；宽度：300px；} .imgae图标img的外部div{高度：100%；宽度：100%；对象适合度：cover；} .imgae图标i的外部div{位置：绝对；顶部：0；左侧：100%；字体大小：40px；颜色：绿色；}

请向我提供此页面的实时链接。您应该删除oferflow-x:auto；我认为它在div的外侧，因为您使用的是溢出-x，并且溢出到x轴。Hi@Sumit非常感谢它为图像所做的工作。。。但是文本正在移出框让我看一下，而不是使用最大宽度：1170px；仅使用宽度：100%；让我知道resultHi@Sumit，是的，它正在工作，非常感谢…..但对于通信细节，我需要编写媒体查询。。这是我面临的问题，如果你不知道，你能检查一下这个链接吗，这里是链接：欢迎你，请随时询问你将来是否会有任何疑问。