为何在900px以下宽度时width:100%属性失效？

以下是几个大概率能解决你问题的排查方向和方案：

• 检查父元素的盒模型与溢出设置
  多数情况下，width:100%失效是因为父元素的盒模型计算方式不对，或者带有默认的内边距/外边距。给父元素和main都加上box-sizing:border-box，确保宽度计算包含内边距和边框，避免内容溢出导致视觉上宽度不足：

  .main-parent, main {
    box-sizing: border-box;
  }
  main {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  

• 排查媒体查询中的冲突样式
  去检查你写的@media (max-width: 900px)规则里，是否给main或者它的祖先元素设置了固定宽度（比如width: 800px）、浮动（float: left/right）或者display: inline-block这类会改变宽度表现的属性。如果有，把固定宽度改成width: 100%，浮动元素记得清除浮动（比如给父元素加 clearfix 类）。

• 定位属性的干扰排查
  如果main或者它的父元素用了position: absolute，width:100%会参考最近的定位父元素宽度。要是这个父元素没设置width:100%，main的宽度就会跟着受限。可以给定位父元素加上width:100%，或者调整定位策略。

• 重置浏览器默认样式
  部分浏览器会给main元素添加默认外边距，导致视觉上看起来宽度没占满。在全局样式里重置main的默认样式：

  main {
    margin: 0;
    padding: 0;
  }
  

内容的提问来源于stack exchange，提问作者aryan raj