HTML CSS调整窗口大小时出现白色边框、背景无法延伸问题求助

问题原因 #

你的样式问题根源出在两点：

1. 背景容器.backgroundColor设置了固定的width: 100%，该宽度仅相对于初始视口计算，当内部子元素（200px字号的标题、108px字号且左外边距48%的按钮）总宽度超过视口宽度时，容器不会随子元素自动撑开，溢出部分就会露出body的白色背景。
2. 绝对定位的设置也限制了容器的自动宽高适配能力。

解决方案 #

第一步：修复背景无法延伸的问题 #

直接将背景色挂载到根元素，同时保留横向滚动能力，修改CSS如下：

/* 新增根元素样式 */
html, body {
  min-height: 100vh;
  background: #1d2026;
  overflow-x: auto;
}

/* 修改原backgroundColor样式，移除冗余属性 */
.backgroundColor{
    min-height: 100vh;
    color: #1d2026;
}

该方案不会禁用横向滚动，且无论内容多宽，背景都会铺满整个页面。

第二步：优化内容适配（可选，避免不必要的横向滚动） #

当前的固定大字号和左外边距设置会在窄窗口下强制产生横向滚动，可调整为自适应布局：

/* 标题改为响应式字号，最小80px，最大200px，随视口宽度自适应 */
h1 p{
    text-align: center;
    padding-top: 150px;
    padding-bottom: auto;
    font-size: clamp(80px, 15vw, 200px);
    color: #29313f;
}

/* 按钮改为居中布局，避免左外边距导致的溢出 */
.roundBtn {
    font-size: 108px;
    color: #29313f;
    background: #1d2026;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0%;
    border: none;
    text-decoration: none;
    margin-top: 50px;
}

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