How to correctly measure the dimensions in PSD for layout?

Question

css

I'm building a website. I have a psd layout, I take measurements in it. Page width 1200, container 900, for example. That's all right. The container also has a 10px horizontal padding (I measure it with a ruler in psd). Nothing complicated either. But visually in the browser, these paddings should obviously be three times larger.
A similar situation arises not only with this size, but also with a number of others. What am I doing wrong? Can you trust photoshop after that?
Here's what's in Photoshop (a watering can in px)
here's it in the browser (in the background there is a substrate from the layout image at 100% scale, the layout of the rest, except for the container, is not ready, of course)

and here is the code codepen.io/birdsforhardcore/pen/RrgGRJ

Answer 1

Maybe the ruler is not in pixels?

Answer 2

If I understand your problem correctly, then you just have padding that increases the width of the container by 20px. "box-sizing: border-box" to the container will help. htmlbook.ru/css/box-sizing
And read htmlbook.ru/content/blochnye-elementy

Answer 3

Well, then show the layout. Maybe it's not the layout, but the fact that you didn't reset the default paddings and don't use normalize.css.

Answer 4

Most likely, a 10px indent was also applied to the background image, as a result, the shift turned out. Apply margin-left:-10px; and look at the result.

Answer 5

The margins on the left of the page match the layout in Photoshop. Your matte has moved to the right by an additional 10px.