css媒体询问为什么内容显示在div之外？

div {
    width: 100%;
    padding: 10px;
    box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

div {
    overflow: auto; /* 或者使用 clearfix 类 */
}

div {
    position: relative; /* 相对定位通常更安全 */
}

@media (max-width: 600px) {
    div {
        width: 100%;
        /* 其他样式 */
    }
}

<div class="container">
    <div class="content">这里是内容</div>
</div>

.container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.content {
    background-color: lightblue;
    padding: 10px;
}

@media (max-width: 600px) {
    .container {
        width: 100%;
    }
}