CSS问题：section元素右侧边框未延伸至页面末端求助

你的问题出在**固定宽度width:760px和margin-left:30%**的组合上——当屏幕宽度足够大时，30%的左边距加上760px的固定宽度，总占比会小于100%，导致元素右侧留出空白，边框自然只到元素本身的右边缘，而非页面末端。

下面给你两种贴近需求的解决方案：

方案1：基于现有float布局修改（保留浮动） #

把固定宽度换成动态计算的剩余宽度，让元素从左边30%的位置开始，一直延伸到页面最右端：

section.courses {
  float: left;
  margin-left: 30%;
  width: calc(100% - 30%); /* 关键：用calc减去左边距，占满剩余空间 */
  border-right: 1px solid #eeeeee;
}

⚠️ 注意：calc()里的减号前后必须有空格，否则浏览器无法正确解析这个表达式。

方案2：移除float（更推荐，避免浮动布局的潜在问题） #

如果你的布局不需要依赖float，可以直接用块级元素的特性，去掉float:left后，元素默认会占满父容器宽度，再通过calc()限制宽度即可：

section.courses {
  margin-left: 30%;
  width: calc(100% - 30%);
  border-right: 1px solid #eeeeee;
}

这样修改后，不管屏幕宽度怎么变，元素都会从左边30%的位置开始，一直延伸到页面右侧，边框自然也就跟着到末端了。

内容的提问来源于stack exchange，提问作者R. Al