Div问题与React-burger-menu

Question

I am trying to use basically all of the options from the React-burger-menu and for some reason I just can't seem to get the styling correct. My index page is somehow contained within my nav divs and even if switch the to the other routes, it's still the same. I'm sure this is something simple. Here's an image of what I am talking about:

I've tried everything I can think of regarding CSS and I just aren't able to get it working properly. Here is the code where the Nav lives:

   render() {
     return (
       <div>
        <Background />
         <Menu>
           <nav className="stroke">
            <ul>
             <div className="menu bm-menu">
              <li>
               <NavLink className="menu-item bm-item" to="/">
                Home
               </NavLink>
              </li>
              <li>
               <NavLink className="menu-item bm-item" to="/portfolio">
                Portfolio
               </NavLink>
              </li>
              <li>
              <NavLink className="menu-item bm-item" to="/contact">
                Contact
              </NavLink>
              </li>
            </div>
          </ul>
        </nav>
      <Route exact path="/" component={Index} />
      <Route path="/portfolio" component={Portfolio} />
      <Route path="/contact" component={Contact} />
      </Menu>
    </div>
   );
  }
 }

And here is my CSS:

   nav {
     z-index: 1;
     width: 100%;
     align-items: center;
     max-height: 3em;
   }

 .menu {
    list-style-type: none;
    justify-content: flex-end;
    border-bottom: 2px solid transparent;
   background: transparent;
 }

 .menu-item {
   margin-right: 1em;
   color: aliceblue;
   font-size: 25px;
   font-weight: bold;
   font-family: 'Raleway', sans-serif;
   text-decoration: none;
 }

.menu-item:hover {
 text-decoration-color: aliceblue;
  }

 nav.stroke ul li a,
 nav.fill ul li a {
position: relative;
 }    

 nav.stroke ul li a:after,
  nav.fill ul li a:after {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 width: 0%;
 content: '.';
 color: transparent;
 background: #aaa;
 height: 1px;
}

nav.stroke ul li a:hover:after {
  width: 100%;
}

nav.fill ul li a {
   transition: all 0.5s;
}

nav.fill ul li a:after {
  text-align: left;
  content: '.';
  margin: 0;
  opacity: 0;
}

 nav.fill ul li a:hover {
  color: #fff;
  z-index: 1;
 }

nav.fill ul li a:hover:after {
 z-index: -10;
 animation: fill .1s forwards;
 -webkit-animation: fill .1s forwards;
 -moz-animation: fill .1s forwards;
 opacity: 1;
}

.bm-burger-button {
  position: fixed;
  width: 36px;
  height: 30px;
  left: 36px;
  top: 36px;
 }
 .bm-burger-bars {
   background: #373a47;
  }
 .bm-menu {
  background: #797c88;
  padding: 2.5em 1.5em 0;
  font-size: 1.15em;
  max-width: 80%;
  }
 .bm-morph-shape {
  fill: #797c88;
  max-width: 80%;
 }
 .bm-item {
  display: inline-block;
  margin-bottom: 2%;
  }
.bm-overlay {
  background: rgba(0, 0, 0, 0.3);
 }

There's also some issues where animations like scaleRotate won't push the canvas out (particle.js). I'm not sure if this can be done or not, but worth a shot. I apologize for asking a dumb question. I normally don't ask about CSS, but I'm stumped here.

Thank you

Answer 1

Turns out it was an issue with the actual library itself. Posted an issue within Github and moved on to a different library.