div.main无法占据整页求助：调整宽度无效该如何解决？

以下是几个关键调整步骤，帮你让div.main占据全部可用空间：

• 重置全局默认边距
  浏览器会给body、h1、h2等元素添加默认margin，这会导致页面整体出现留白，让你的div看起来没占满屏幕。先把这些默认边距清掉：

body {
  margin: 0;
}

• 确保div.main的宽度计算包含边框
  如果你给div加了边框，默认情况下CSS的width属性只计算内容宽度，边框会额外占空间，导致div超出或者看起来没填满。设置box-sizing: border-box让宽度包含边框和内边距：

.main {
  border: 2px solid blue; /* 你的蓝色边框 */
  width: 100%; /* 块级元素默认是auto，这里显式声明也可以 */
  box-sizing: border-box;
  margin: 0; /* 清除div自身的默认margin */
}

• 检查父元素的宽度限制
  如果div.main的父元素（比如某个容器）设置了固定宽度或者max-width，那div也会被限制在这个宽度里。确保父元素的宽度是100%或者auto，没有额外的宽度限制。

• 调整内部标题的边距（可选）
  h1和h2默认有上下margin，可能会让div内部出现不必要的空白，根据你的视觉需求调整：

.main h1, .main h2 {
  margin: 1rem 0; /* 保留上下间距，或者设为0完全清除 */
}

内容的提问来源于stack exchange，提问作者Pranav Sharma