Как правильно снять размеры в PSD для верстки?

Question

[birdsforhardcore]

Верстаю сайт. Есть psd макет, в нем снимаю размеры. Ширина страницы 1200, контейнер 900, например. С этим все в порядке. В контейнере есть еще паддинг горизонтальный 10px (меряю линейкой в psd). Тоже ничего сложного. Но визуально в браузере эти паддинги явно должны быть больше раза в три.
Подобная ситуация возникает не только с этим размером, но и с рядом других. Что я делаю не так? Можно ли верить после этого фотошопу?

Вот что в фотошопе (лейка в px)

вот это в браузере (в фоне подложка из картинки макета в масштабе 100%, верстка остального, кроме контейнера, не готова, конечно)


и вот код codepen.io/birdsforhardcore/pen/RrgGRJ

Comments

[Нерон Лордов]

Скриншот в студию - как выглядит в фотошопе, как в браузере.

[birdsforhardcore]

готово

Answer 1

[goandkill]

Может линейка не в пикселях?

Comments

[birdsforhardcore]

в пикселях

Answer 2

[Максим Постолов]

Если я правильно понял вашу проблему, то у вас просто padding увеличивает ширину контейнера на 20px. "box-sizing: border-box" контейнеру поможет. htmlbook.ru/css/box-sizing
И почитать htmlbook.ru/content/blochnye-elementy

Answer 3

[KuzmenkoArtem]

Возможно дело в DPI ?
в фотошопе стоит слишком много или слишком мало, и поэтому кажется различие

Answer 4

[Mr Crabbz]

Ну так вёрстку то покажите. Может не в макете дело а в том, что вы не обнулили изначально стандартные паддинги и не используете normalize.css.

Comments

[birdsforhardcore]

все обнулено, normalize подключен. сейчас найду куда выложить код

[birdsforhardcore]

добавил код

Answer 5

[Новомир Лобанов]

Скорее всего к картинке-подложке применился тоже отступ в 10px, в итоге и сдвиг получился. Примените к ней margin-left:-10px; и посмотрите на результат.

Answer 6

[vatuma]

Отступы слева на странице соответствуют макету в фотошопе. Ваша подложка съехала вправо на дополнительные 10px.