Почему эта CSS-сетка отображается в неверных размерах в пикселях?

Question

Я только начинаю с CSS Grid, и он отображает правильные поля в нужных местах, но с неправильным размером пикселя???? Основной контейнер отображается примерно на 1500px вместо 1200px и все размеры строк тоже неверны.

#container {
  width: 1200px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 225px 175px 225px 160px;
}

.feature {
  grid-row: 1 / 5;
}

.vertical {
  grid-row-end: span 2;
}

.im_picture {
  background-color: #336;
}

.im_picture img {}

.button {
  background-color: #808000;
  grid-column: 2 / 4;
}

<div id="container">
  <div class="im_picture feature"></div>
  <div class="im_picture vertical"></div>
  <div class="im_picture"></div>
  <div class="im_picture vertical"></div>
  <div class="im_picture"></div>
  <div class="button">book a session</div>

Answer 1

Ничего плохого в коде, это проблема сочетания настроек Chrome и Windows

https://superuser.com/questions/1139259/how-to-adjust-ui-scaling-for-chrome