Javascript 获取水平滚动条，但宽度为100%

我是初学者。我正在尝试创建网页来练习HTML和CSS。我把它们的宽度都设置为100%，但我得到的是水平滚动条。我试图找出问题，但失败了

我的代码：

*{
保证金：0；
填充：0；
框大小：边框框；
字体系列：-苹果系统，BlinkMacSystemFont，'Segoe UI'，Roboto，Oxygen，Ubuntu，Cantarell，'Open Sans'，'Helvetica Neue'，Sans serif；
}
标题{
宽度：100%；
高度：89vh；
显示：网格；
网格模板列：53.7%自动；
栅柱间隙：2.2rem；
边框：1px纯黑；
}
.标题-1{
身高：100%；
宽度：100%；
背景：url（./twitter-header-2.png）无重复中心/封面；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.header-1>i{
字号：275px；
颜色：白色；
}
.标题-2{
身高：100%；
宽度：100%；
显示器：flex；
对齐项目：居中；
}
.标题-2 i{
字体大小：42px；
颜色：#1da1f2；
边缘底部：4rem；
}
.标题-2-标题{
字体系列：TwitterChirpExtendedHeavy、Verdana、-苹果系统、BlinkMacSystemFont、“Segoe UI”、Roboto、Helvetica、Arial、无衬线字体；
字体大小：64px；
字体大小：粗体；
边缘底部：3.2rem；
}
.标题-2-副标题{
字体系列：TwitterChirpExtendedHeavy、Verdana、-苹果系统、BlinkMacSystemFont、“Segoe UI”、Roboto、Helvetica、Arial、无衬线字体；
字体大小：31px；
字体大小：粗体；
边缘底部：2rem；
}
.标题-2 a{
文字装饰：无；
}
.标题-2-a-1、.标题-2-a-2{
宽度：64%；
文本对齐：居中；
边缘底部：20px；
填充：13px0；
边界半径：30px；
字体大小：粗体；
}
.标题-2-a-1{
背景：#1da1f2；
颜色：白色；
}
.标题-2-a-2{
边框：1px实心#1da1f2；
颜色：#1da1f2；
背景：透明；
}
.标题-2-a-1：悬停{
背景：#1a91da；
}
.标题-2-a-2：悬停{
背景：#e8f5fe；
}
/*======================================================================================================*/
页脚{
宽度：100%；
高度：自动；
文本对齐：居中；
对齐项目：居中；
利润率：10px0；
边框：1px纯黑；
}
页脚a，页脚p{
颜色：5b7083；
字体大小：13px；
文字装饰：无；
}
页脚a{
利润率：0.5px；
}
页脚p{
边缘顶部：5px；
}
页脚a：悬停{
文字装饰：下划线；
}
/*============================================================================*/

啁啾这就是正在发生的事情/推特
现在正在发生
立即加入Twitter
&抄袭；2021年推特公司

我找到了一个解决方案。 您所要做的就是更改标题的display属性。像这样：

header {
    width: 100%;
    height: 89vh;
    display: flex;    // changed from grid
    grid-template-columns: 53.7% auto;
    grid-column-gap: 2.2rem;
    border: 1px solid black; 
}

---

在这里，使用flex更改display属性。

由于以下原因被否决：答案是宽泛和不具体。这个Anwser应该包含一个最小的可复制代码段，以表明答案是有效的。还要解释问题以及解决方案将如何解决问题。在哪里应用属性。请不要发布两次相同的答案。根据提供的代码，我无法重现您描述的问题。我没有水平滚动条。当我进入

inspect

模式时，滚动条会出现。您的解决方案有效。但它必须是网格。因为对于小型设备，收割台1必须移动到收割台2下方。有没有办法通过保持网格来解决这个问题？

header {
    width: 100%;
    height: 89vh;
    display: flex;      // change this part
    grid-template-columns: 53.7% auto;
    grid-column-gap: 2.2rem;
    border: 1px solid black; 
}