html, body {
  width: 100%;
  overflow-x: hidden;
}

/* opcional mas ajuda em layouts com wrappers */
.page {
  width: 100%;
  overflow-x: hidden;
}

/* 2) No mobile, faça o nav "sair" com transform (não com right:-100%) */
@media (max-width: 960px) {
  /* sobrescreve suas regras atuais do nav */
  nav#nav-menu {
    position: fixed;
    top: 70px;
    right: 0;                 /* fica ancorado à direita */
    left: auto;
    width: 100%;
    height: calc(100dvh - 70px); /* dVh ajuda no mobile */
    background: #ffffff;

    /* o truque: some com transform */
    transform: translateX(100%);
    transition: transform 0.35s ease;

    /* 3) fechado não interage e não “vaza” */
    visibility: hidden;
    pointer-events: none;

    /* mantém seu visual */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 2rem;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);

    /* evita que qualquer filho force overflow */
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  nav#nav-menu.active {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }
}