Section snapping whilst scrolling

I'm trying to implement page/section snapping as you scroll page to page, for some reason the class="outer" seems to be interfering with the first page title, button and the nav bar? The nav bar was functional before I added the classes "outer" and "page" the title and button also remained on the first page and did not pass through to the other pages. anyone know what this problem is? have a feeling it's something simple

html, body {
    margin: 0;
    height:100%;
    width:100%;
    padding:0;
}


@media (min-height: 30em) {
  .section__content > * {
    opacity: 0;
    transform: translate3d(0, 4rem, 0);
    transition: opacity 800ms var(--delay),
      transform 800ms cubic-bezier(0.13, 0.07, 0.26, 0.99) var(--delay);
  }
}

.is-visible .section__content > * {
  opacity: 1;
  transform: translate3d(0, 1rem, 0);
}
.is-visible .section__img {
  opacity: 0.75;
}

section {
    display: block;
    background: #CFF;
    height:100%;
    width:100%;
    box-sizing:border-box;
    scroll-snap-align: center;
    
}
.background1 {

background: url("IMG-7323.GIF") no-repeat center center ;
background-size: cover; 
max-width: 100%;
max-height: 100%;
height: 100vh;
width: 100vw;
}

.outer {
  overflow-y:auto;
  scroll-snap-type: y mandatory;
  height: 100vh;
}

.page {
  scroll-snap-align: start; height: 100vh;
}

#one {
    background: #111816;
    color: #fff;
    
}



/* Title section 1 */
.glow-on-hover {
    width: 220px;
    height: 35px;
    border: none;
    outline: none;
    color: rgb(0, 0, 0);
    font-weight: bold;
    font-size: 20px;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
  }

  .glow-on-hover:before {
    content: "";
    background: linear-gradient(
      45deg,
      #ffffff,
      #969594,
      #ffffff,
      #969594,
      #ffffff,
      #969594,
      #ffffff,
      #969594,
      #ffffff
    );
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    border-radius: 10px;
  }

  .glow-on-hover:active {
    color: #000;
  }

  .glow-on-hover:active:after {
    background: transparent;
  }

  .glow-on-hover:hover:before {
    opacity: 1;
  }

  .glow-on-hover:after {
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(150, 167, 204);
    left: 0;
    top: 0;
    border-radius: 10px;
  }

  @keyframes glowing {
    0% {
      background-position: 0 0;
    }
    50% {
      background-position: 400% 0;
    }
    100% {
      background-position: 0 0;
    }
  }

  h1 {
    position: relative;
    font-family: TaylorGothic;
    font-size: calc(20px + 5vw);
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-shadow: 0 0 0.15em #1da9cc;
    user-select: none;
    white-space: nowrap;
    filter: blur(0.007em);
    animation: shake 2.5s  infinite linear forwards;
}

@font-face {
  font-family: TaylorGothic;
  src: url(TaylorGothic.woff2);
}

@keyframes shake {
    5%, 15%, 25%, 35%, 55%, 65%, 75%, 95% {
        filter: blur(0.018em);
        transform: translateY(0.018em) rotate(0deg);
    }

    10%, 30%, 40%, 50%, 70%, 80%, 90% {
        filter: blur(0.01em);
        transform: translateY(-0.018em) rotate(0deg);
    }

    20%, 60% {
        filter: blur(0.03em);
        transform: translate(-0.018em, 0.018em) rotate(0deg);
    }

    45%, 85% {
        filter: blur(0.03em);
        transform: translate(0.018em, -0.018em) rotate(0deg);
    }

    100% {
        filter: blur(0.007em);
        transform: translate(0) rotate(-0.5deg);
    }
}

@keyframes crack1 {
    0%, 95% {
        transform: translate(-50%, -50%);
    }

    100% {
        transform: translate(-51%, -48%);
    }
}

@keyframes crack2 {
    0%, 95% {
        transform: translate(-50%, -50%);
    }

    100% {
        transform: translate(-49%, -53%);
    }
}

  /* for the heading and the button alignment*/

  
  .btn-centering {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }


/*  section one end */



#two {
    background: #123037;
    color: #fff;
    font-size: 30px;
}
#three {
    background: #74BE98;
    font-size: 30px;
}
#four {
    background: #BED28D;
    font-size: 30px;
}
#five {
    background: #95211D;
    color: #fff;
    font-size: 30px;
}
nav {
    position: fixed;
}
nav a {
    display: block;
    font-size: 12px;
    color: #FFF;
    text-align: center;
    background: #000;
    padding: 10px;
    margin: 3px;
}

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">    <title></title>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    
    
    
    
    
    <script>
        $(function() {
            $('a[href*=#]:not([href=#])').click(function() {
                if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                    var target = $(this.hash);
                    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                    if (target.length) {
                        $('html,body').animate({
                            scrollTop: target.offset().top
                        }, 1000);
                        return false;
                    }
                }
            });
        });
    </script>


</head>
<body>
 <nav> 
 <a href="#one">one</a>
 <a href="#two">two</a>
 <a href="#three">three</a>
 <a href="#four">four</a>
 <a href="#five">five</a>
</nav>
  
    

<div class="outer"> 
    <section id="one" > 

        <div class="page">

        <div class="background1"></div>

<!-- Title -->
           
        <div class="btn-centering">
            <h1 data-text="black mirror"><span>Ghosted</span></h1>
            <button class="glow-on-hover" onclick="location.href='products.html'" type="button">
            View Products</button></div>
            
<!-- Socail media buttons --> 




    </section>
    <section id="two">Page 2
      <div class="page"></div>

    </section>
    <section id="three">Page 3
      <div class="page"></div>
    </section>
    <section id="four">Page 4
      <div class="page"></div>
    </section>
    <section id="five">Page 5
      <div class="page"></div>
    </section>
 </div>
 
      
</body>
</html>

from Section snapping whilst scrolling