Margin与Padding致网页宽度异常：页脚左移右侧留白问题

问题根源 #

1. 媒体查询里给.footer-text硬设了600px固定宽度，当屏幕宽度小于600px时，这个宽度会超出父容器范围，要么导致文本溢出，要么触发横向滚动，同时破坏页面整体对齐。
2. .copyright-info没有设置flex-wrap: wrap，小屏幕下内容挤在一起无法换行，再加上默认的padding-left:20px，进一步加剧了布局偏移。

修复后的CSS代码 #

body{
    width:100%;
    background-color: white;
    font-family:'Noto Sans Thai',Arial, Helvetica, sans-serif;
}
*{
    margin: 0;
    box-sizing: border-box;
    padding: 0;
}
@media( max-width:900px ){
 .footer-text p {
        padding-left: 40px;
        padding-right: 40px;
    }   
    .footer-content .copyright-info {
        flex-direction: column;
        padding-left: 0; /* 移除左侧内边距，避免偏移 */
    }
    .footer-content .copyright-info .extras{
        display: none;
    }
    /* 移除固定宽度，改为自适应父容器 */
    .footer-content .footer-text{
        width: 100%;
    }
}

.footer-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: black;
    padding-bottom: 20px;
    width:100%;
}

 footer{
    width:100%;
}

.footer-text{
    width:100%;
    margin-top: 50px;
    color: rgb(198, 198, 198);
    padding: 0 100px 0 100px;
    text-align: center;
    margin-bottom: 60px;
}
.footer-text p{
    display:inline-block;
    margin-bottom: 20px;
    font-size: 14px;
}
.copyright-info{
    display: flex;
    flex-wrap: wrap; /* 添加自动换行，适配小屏幕 */
    font-size: 14px;
    text-align: center;
    color: rgb(198, 198, 198);
    padding-bottom: 10px;
    padding-left: 20px;
    justify-content: center; /* 让内容居中对齐，避免左偏 */
}
.copyright-info-content{
    margin-top: 15px;
    margin-right: 20px;
    cursor: pointer;
}
.extras{
    display: flex;
}
.footer-text span{
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: bolder;
}
.footer-text span:hover{
    color: white;
}

关键修改说明 #

• 移除固定宽度：把媒体查询里.footer-text的width:600px改成width:100%，让它跟着父容器宽度自适应，不会超出屏幕导致溢出或偏移。
• 版权信息换行：给.copyright-info加flex-wrap: wrap和justify-content: center，小屏幕下内容自动换行且居中，避免挤成一团或左偏。
• 重置内边距：媒体查询里给.copyright-info去掉padding-left，小屏幕下不会额外留白，保持整体对齐。

这样修改后，页脚既能保持桌面端的padding留白，小屏幕下也不会出现偏移或文本溢出的问题，完全适配不同设备宽度。

内容的提问来源于stack exchange，提问作者itx coding