为什么子元素div.block仍继承父元素宽度，无法占满浏览器全宽？

解决方法 #

1. 先修正HTML标签闭合错误 #

你现有代码里所有按钮对应的a标签内的div都没有正确闭合，会导致浏览器布局解析异常，先统一修正：

<!-- 修正前 -->
<a href="Project.html"><div id="button1"><p class="buttonint">HTML and CSS</p></a>
<!-- 修正后 -->
<a href="Project.html"><div id="button1"><p class="buttonint">HTML and CSS</p></div></a>

其余3个Javascript、Bootstrap、PHP对应的按钮也要做同样的闭合修正。

2. 清除页面默认边距 #

浏览器默认给body设置了外边距，会导致全宽元素左右出现留白，在CSS里添加以下规则：

html, body {
  width: 100%;
  margin: 0;
  padding: 0;
}

3. 调整.block元素的宽度规则 #

你现在写的width: auto会继承父元素的宽度限制，直接改成占满父级全宽即可：

.block{
    width: 100%;
    height: 20px;
    background-color: darkred;
}

你给.container设置的grid布局是用来把按钮叠在图片上方的，对.block的宽度没有影响，不需要改动这块逻辑。

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