100% ширина просмотра (vw) в Chrome не работает?

Question

Я пытался переопределить этот codepen , и я заметил, что объявление vw действует странно для chrome. Всякий раз, когда я запускаю этот код на своем локальном сервере, даже несмотря на то, что я объявил, что GalleryGrid должен иметь 100vw, он неправильно измеряет размер только в chrome. Другие браузеры, такие как Firefox и Safari, работают нормально. Кто-нибудь знает, почему это происходит?

Chrome

Safari / Firefox

HTML

<div class="front margin">
  <GalleryGrid>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </GalleryGrid>
</div>

CSS

    GalleryGrid{
      --content-width: 100vw;
      --gutter: 1.5em;
      --columns: 1;
      --width-size: calc(
        ( var(--content-width) - (var(--gutter) * (var(-- 
      columns) - 1))
        ) / var(--columns)
      );
      --row-size: calc(
        ((var(--width-size) * 3)/ 2));
      display: grid;
      width: 100%;
      max-width: var(--content-width);
      grid-template-columns: repeat(var(--columns), 1fr);
      grid-auto-rows: var(--row-size);
      grid-column-gap: var(--gutter);
      grid-row-gap: var(--gutter);
    }

    .item {
      position: relative;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12),
                  0 2px 4px 0 rgba(0,0,0,0.08);
     }
   .front {
     font-family: Noto Sans, Arial, sans-serif;
     padding: 3em 0;
     margin: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
   }
    .margin{
        margin-left: 4%!important;
        margin-right: 4%!important;
    }

Answer 1

У вас GalleryGrid сидит внутри контейнера с классом margin, который имеет поля слева и справа. Они добавляются по сторонам, так как вы устанавливаете ширину GalleryGrid на 100%, а не 100vw