Html 仅当通过HDMI电缆连接到电视时，使用负边距的Div扩展超过容器Div时才有x滚动

我目前在一家公司的网站上工作。我使用了负边距加上正填充，使页脚和顶部栏填满页面的100%宽度，即使它们包含在另一个div中，包装设置为65%左右。据我所知，这是一种比较有名的方法，但会导致内容超出页面的侧面

无论如何，为了防止横向滚动，有一个x-overflow：隐藏在html和body上。当我在我的电脑前时，这是可行的，但当我今天向同事展示网站时，它不起作用。我让我的笔记本电脑通过HDMI电缆连接到一台大电视上，我可以滚动到一边（没有滚动条，只有三个按钮的鼠标）。回到我的正常设置（同一台笔记本电脑上连接了第二个显示器），我无法再滚动

代码是这样的：

HTML

这对我来说不是一个超级大的问题（除非我发现它在更多的情况下发生）。我怀疑我的网站会经常在连接到笔记本电脑的大型电视上被浏览，但我很好奇是什么导致了它。或者，如果有人有更好的方法将div扩展到容器之外，我也愿意听听这些。提前感谢您的任何意见

正文{
保证金：0；
填充：0；
}
#包装纸{
宽度：65%；
保证金：0自动；
}
.延伸{
/* 35/65*100 = 26.92 */
右边距：-26.92%；
左缘：-26.92%；
背景色：红色；
}
.范围内容{
宽度：100%；
填充：10px；
}

全幅示例
这是扩展到页面之外并导致横向滚动的div。

我喜欢使用一个结构，每个部分有一个外包装和一个内包装。内包装将获得固定宽度，外包装通常获得100%的屏幕。这允许您在不使用负边距的情况下将全宽部分和包含的部分放在一起

摆弄例子：

代码样式：

<div class="outer">
    <div class="inner"></div>
</div>

请尝试将

x-overflow

更正为

overflow-x

。对不起，这是一个打字错误。：）刚刚意识到。我并没有从我的网站上复制这个，所以这不是问题。你会考虑到HTML的结构改变吗？我会的。当然，这取决于你的建议。

html {
 overflow-x: hidden;
}

body {
 overflow-x: hidden;
}

.extend {
 padding-left:35%;
 margin-left:-35%;
 padding-right:35%;
 margin-right:-35%;
}

 #wrapper {
 width:65%;
 margin:0 auto;
}

<div class="outer">
    <div class="inner"></div>
</div>