如何用CSS实现从左到右无间距的水平实线（CS50作业）

我正在完成CS50 Web课程的作业，需要制作类似谷歌高级搜索的页面。当前用CSS绘制水平线条时左右存在间距，但谷歌原版页面没有，想请教如何实现从左到右贯穿的水平实线。

以下是我的代码：

HTML代码 #

<div class="line"></div>

CSS代码 #

.line {
    border-bottom: 1px solid #ebebeb;
}

（附对比截图）

出现左右间距的原因大多是父元素或.line元素本身带有默认的外边距（margin）、内边距（padding），或者页面的body元素有默认边距。试试这几种解决方法：

• 清除.line的内外边距

.line {
    border-bottom: 1px solid #ebebeb;
    margin: 0;
    padding: 0;
}

• 重置body的默认边距
  多数浏览器会给body添加默认边距，全局清除即可：

body {
    margin: 0;
    padding: 0;
}

• 强制线条占满宽度
  给.line设置width: 100%，确保它撑满父容器：

.line {
    border-bottom: 1px solid #ebebeb;
    width: 100%;
    margin: 0;
}

另外补充：谷歌原版的水平线条一般不会单独用div实现，而是直接给上方的容器添加border-bottom，这样线条会自然贴合容器宽度，不会出现间距问题。

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