给class为mainpic的div应用CSS设置宽度不生效，如何解决？

• HTML语法错误导致DOM结构解析异常：你代码中class为mainpic的div没有正确闭合，结束位置错误写为<div>而非</div>，同时<h2>标签错误使用</p>闭合，浏览器解析DOM结构时会识别为结构错误，导致绑定在.mainpic上的CSS规则无法正确匹配到对应元素。
• 缺少图片适配父容器的CSS规则：img属于替换元素，默认会按照自身原始尺寸渲染，仅给父容器设置宽度不会限制图片的尺寸，若图片原始宽度大于300px，就会直接溢出父容器，视觉上看起来父容器的宽度设置没有生效。

1. 修正HTML语法错误

<!-- 把h2的错误闭合标签修改 -->
<h2> Silver Spoon to CEO</h2>

<!-- 把mainpic的错误开放标签修改为闭合标签 -->
<div class="mainpic">
  <img src="http://t2.gstatic.com/licensed-image?q=tbn:ANd9GcR42mPHUzh3APxp1Q8iK6BiQNns98VuwX9zk2nQvukALjFAc8207NEMfcOES8Qe" alt="Katherine Graham">
</div>

2. 新增CSS规则让图片自适应父容器宽度

.mainpic img {
  width: 100%;
  height: auto; /* 保留图片原始宽高比，避免拉伸变形 */
}

修复完成后，.mainpic的300px宽度规则会正常生效，图片也会自动适配为300px宽度。

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