Can't set @media queries correctly?

Question

Adaptive design

Hello!
I studied the theory, everything seems to be clear ... but
I do the Layout from larger to smaller.
The styles look like this:

html, body{
  width: 100%;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size:100%/1.4;
}

{ тут идут стили для полной ширины экрана 1920px}

/* медиа-запросы */

@media (max-width: 1400px) { }

@media (max-width: 1200px) { }

@media (max-width: 1000px) { }

@media (max-width: 900px) { }

@media (max-width: 800px) {
  body{ width: 800px; }	
}

Breakpoints are not exactly the same (by pixels) but not so important. It is necessary that the site from full width on FullHD monitors of 1920px collapses to a minimum width of 800px. And further scaling was shown on devices whose screen width is less than 800px.
Everything seems to be working. In Firefox Ctrl + Shift + M I shrink the screen, the blocks jump over, everything is ok. At a width of 800px, horizontal scrolling appears, such as everything further. I check on Iphone 5 - everything is ok, the site from the request max-width: 800px is scaled to the full width of the phone. Up to this point everything is correct.
But if you look at the tablet, which has a screen width in the range of more than 800 and less than 1920 px, then horizontal scrolling appears. In Firefox, there is no such thing on the computer monitor, but there is one on the device.
tag

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">

registered
on the phone, horizontal scrolling also appeared, until max-width: 800px was specified in the media query. body{ width: 800px; }
What am I doing wrong?

Answer 1

Well, does no one really know? ... or no one has had this?
maybe you need to specify the width of the body in each request ? well, like this:

html, body{
  width: 100%;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size:100%/1.4;
}

{ тут идут стили для полной ширины экрана 1920px}

/* медиа-запросы */

@media (max-width: 1400px) { 
body { max-width:1400px}
}

@media (max-width: 1200px) {
body { max-width:1200px}
}

@media (max-width: 1000px) {
body { max-width:1000px}
}

@media (max-width: 900px) {
body { max-width:900px}
}

@media (max-width: 800px) {
  body{ width: 800px; }	
}

but body is specified at the very beginning 100% and it extends to all styles (it only interrupts body{width:800px} in the last request. Well, 100% is, as I understand it, from edge to edge of the screen ... no more no less .. .so
why does the horizontal scrollbar appear?

Answer 2

Maybe I forgot reset.css?
I can only recommend one article. Hope it helps.
you here

Answer 3

Is there an extension for Firefox in order to check the responsive design of only one site, using the proposed types of devices and special tools for a web programmer (I know such a User Agent Switcher extension that works in the entire browser, switching to mobile versions)?