Absolutely positioned row wider than container

Question

I have a website that consists of a single bootstrap container-fluid, with multiple rows inside it. Each row is the height of the viewport (100vh). At the bottom, I have another row, the footer. This has a fixed height, and should be positioned absolutely so that it overlaps the bottom of the last page row. Setting position: absolute, and bottom: 0 puts it in the correct position vertically, but strange things happen.

The footer row no longer fills the container horizontally, unless I set width: 100vw. in which case, it ends up 15px wider than the viewport (the container-fluid is exactly as wide as the viewport). I have tried various combinations of zero horizontal padding / margin, but it didn't help.

.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>

It's not entirely obvious in the snippet unless you use the dev tools, but the footer row has a greater width than the container.

The vertical positioning in the snippet, however, is as desired.