房屋广告影响移动端尺寸

[Clo]

您好，

我最近启用了我的网站的广告插件，目的是展示内部广告。
我已按照内部广告模板主题中的建议添加了内部广告代码。

但是，它在移动/响应式版本上一直与我主题的其他 CSS 样式混乱。

看起来类别框的容器的宽度突然超出了屏幕大小。

这是我正在使用的 CSS 代码：

.banner-ad {
    display: flex;
    justify-content: center; /* 水平居中内容 */
    align-items: center; /* 在广告内垂直居中内容 */
    clear: both;
    width: calc(#{$topic-body-width} + #{$topic-avatar-width} + (#{$topic-body-width-padding} * 2)); /* 用于居中的显式宽度 */
    max-width: 100%; /* 确保它不会超出容器宽度 */
    box-sizing: border-box;
    margin: 15px auto; /* 居中广告并在上方和下方添加 15px 的边距 */
    text-align: center; /* 居中内联元素，例如图像 */

    img {
        display: block;
        margin: 0 auto; /* 在广告内居中图像 */
        max-width: 100%; /* 确保图像缩放以填充广告宽度 */
        height: auto; /* 保持纵横比 */
        max-height: 200px; /* 设置最大高度以限制图像 */
        object-fit: contain; /* 确保图像按比例缩放 */
        border-radius: 10px; /* 将边角圆化 10px */

        &.desktop {
            display: block;
        }
        &.mobile {
            display: none;
        }
    }
}

@media only screen and (max-width: 100px) {
    .banner-ad {
        img.desktop, p {
            display: none;
        }
        img.mobile {
            display: block;
            margin: 0 auto; /* 居中移动图像 */
            max-width: 80%; /* 确保移动图像缩放到容器宽度 */
            height: auto; /* 保持纵横比 */
            border-radius: 10px; /* 也为移动图像圆化边角 */
        }
    }
}

任何能帮助我解决这个问题的建议都将不胜感激！