html - Div extended past container div using negative margins has x scrolling only when connected to TV via HDMI cable -

I am currently working on a company website. I have used negative margins and positive padding to make the footer, and despite filling the 100% width of the top bars page, they are contained in the other, the cover is set to about 65%. This, as far as I know, is a relatively well-known way to do this, but it causes the content to go beyond the sides of the page.

However, there is an X-overflow to avoid scrolling sideways: HTML and body are hidden on both. It works when I'm on my computer, but when I was showing the website to my colleagues today, it was not working. My laptop was connected to a large TV via an HDMI cable and I was able to scroll to the edge (no scroll bar, with only three button mouse). Back to my normal setup (attached to the same laptop with a second monitor) and now I can not scroll

The code is something like this:

HTML

  & lt; Div id = "wrapper" & gt; & Lt; Div class = "expansion" & gt; It is a divas stretching beyond the page and scrolls sideways. & Lt; / Div & gt; & Lt; / Div & gt;  

css

  html {overflow-x: hidden; Body {overflow-x: hidden; } .extend {padding-left: 35%; Margin-left: -35%; Paddle-right: 35%; Margin-right: -35%; } # Wpm {width: 65%; Margin: 0 auto; }  

This is not a big problem for me (unless I search for it in more cases). I suspect that my website will often be seen that I'm often curious about what is happening due to a large TV connected to a laptop. Or if someone has better ways of expanding their container's divisions, then I want to hear about those people too. Thanks in advance for any input!

  body {margin: 0; Padding: 0; } # Wpm {width: 65%; Margin: 0 auto; } .extend {/ * 35/65 * 100 = 26.92 * / margin-right: -26.92%; Margin-left: -26.92%; Background color: red; }. Sub-content {width: 100%; Padding: 10px; }  

  & lt ;! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Title & gt; Full width example & lt; / Title & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "wrapper" & gt; & Lt; Div class = "expansion" & gt; & Lt; Div class = "extent-content" & gt; It is a divas stretching beyond the page and scrolls sideways. & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;