模态窗口导致对齐问题（可能是由于OnePageScroll.js）

Question

SOLUTION：
我所要做的就是更改导致页面溢出的节中心对齐。

问题
当我在第一页打开模态窗口（覆盖窗口，就像网站用来要求您在离开之前注册简报）时，它们都可以正常工作。当我向下滚动并打开第二页或第三页上的模态窗口时，它会破坏模态窗口后面的元素对齐。

照片管理


正如您在第一张图片中看到的那样，它在第一页上运行得很好。问题发生在第二页和第三页，它似乎是背景元素对齐的事情。

相关代码
我的HTML：

<!-- Modal window -->
<div id="open-csci-modal" class="modal-bg">
  <div class="modal-content">
    <a href="#close" title="Close" class="close">
    <img src="img/exit-icon.png"></a>
    <h2>Computer Science Major</h2>
    <p>Paragraph about what I've learned in school.</p>
  </div>
</div>

我的CSS：

section {
  height: 100vh;
  background-size: cover;
}
.modal-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
  z-index: 99999;
  opacity:0;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
.modal-bg:target {
  opacity:1;
  pointer-events: auto;
}
.modal-bg > div {
  width: 800px;
  height: 410px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: rgba(112, 156, 250, 0.75);
}  

链接
OnePageScroll.js source code (GitHub repo)
My portfolio source code in its entirety (GitHub repo)

提前非常感谢。我一直在努力寻找原因。