How to make a website responsive for same screen resolution but different size?

Question

css

Good day, I have 2 monitors, one with a diagonal of 23 and a resolution of 1920x1080, on which I make a website, and start from it, creating adaptability for smaller resolutions, using the standard browser tool for checking adaptability, for example, when I check the resolution is 1366x768 and I create styles for this resolution, then everything is fine, but if you open the site on a laptop with a resolution of 1366x768, the design is slightly different from what the browser tool shows for the same resolution, for example, if everything is exactly the same in the tool for 1366, then on a laptop with that the same resolution a little everything floats down, how to deal with it? And the second point, there is a small laptop with a diagonal of 15 and a resolution of 1920x1080, and so all the default styles that were made for this resolution are floating, but everything is fine on a monitor with the same resolution,

Answer 1

1.1 Browsers have scrollbars, panels that take height, old ones also have frames (or it depends on the OS and not on the browser version, I forgot how it looked).
1.2. Monitors have different aspect ratios
=> vertical scroll on some will appear earlier than on others and the width of the field will decrease accordingly.
2. Browsers have scale. Check, it often happens accidentally and imperceptibly +/-10%
3. There is an OS setting. Often on small laptops with high resolutions, the scale is more than 100%. However, it does not work in all browsers/applications.

Answer 2

I had a bug in FF in adaptive mode - selectors were displayed without specified styles, incl. I advise you to carry out the final check after all by changing the screen resolution.

Answer 3

you are not based on the screen resolution (1366), but on the content of the page.
if there is a scroll, then the width will already be smaller.
make it so that it is normally displayed at any resolution, at least 1327px, at least 839px