CSS Grid 12列布局浏览器异常：留白或溢出滚动条求助

我正在通过在线课程学习CSS Grid，但基础12列布局在浏览器中的表现十分异常。即便完全照搬讲师代码，网格始终要么存在剩余空间，要么溢出并出现滚动条。咨询讲师后仍无法解决，导致学习停滞。

我曾以为是显示器问题，但无论使用100%、125%、150%缩放比例（分辨率1920 x 1080），问题仍存在。Chrome和Firefox浏览器均出现该问题。

网格结构代码如下：

#content{
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-auto-rows: minmax(100px,auto);
    position: relative;
}

相关截图说明：

• 系统显示设置截图
• 缩放100%效果截图
• 缩放125%效果截图
• 缩放150%效果截图

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