Абсолютно позиционированный ряд шире контейнера

Question

У меня есть веб-сайт, который состоит из одного загрузочного контейнера с несколькими строками внутри. Каждая строка является высотой области просмотра (100vh). Внизу у меня есть еще один ряд, нижний колонтитул. Он имеет фиксированную высоту и должен располагаться абсолютно так, чтобы он перекрывал нижнюю часть последней строки страницы. Установка позиции: абсолютная и нижняя: 0 помещает его в правильное положение по вертикали, но происходят странные вещи.

Строка нижнего колонтитула больше не заполняет контейнер горизонтально, если я не установил width: 100vw. в этом случае он оказывается на 15 пикселей шире, чем окно просмотра (контейнер-жидкость точно такой же ширины, как и окно просмотра). Я пробовал различные комбинации нулевого горизонтального заполнения / отступа, но это не помогло.

.pageRow {
  height: 100vh !important;
}

.page1 {
  background-color: rgba(255, 0, 0, 0.2);
}

.page2 {
  background-color: rgba(0, 255, 0, 0.2);
}

.footer {
  background-color: rgba(0, 0, 255, 0.2);
  position: absolute;
  bottom: 0;
  height: 18vh;
  width: 100vw;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="container-fluid" style="position: relative">

  <div class="row pageRow page1">
    <div class="col text-center">
      FOO
    </div>
  </div>

  <div class="row pageRow page2">
    <div class="col text-center">
      FOO
    </div>
  </div>

  <div class="row footer">
    <div class="col text-center">
      FOOTER
    </div>
  </div>

</div>

Это не совсем очевидно во фрагменте, если вы не используете инструменты dev, но строка нижнего колонтитула имеет большую ширину, чем контейнер.

Вертикальное позиционирование во фрагменте, однако, соответствует желаемому.