```js
const burger= document.querySelector('.hb');
const wrapper= document.querySelector('.wrapper');
const timeline= new TimelineMax({});
const one= burger.querySelector(".one");
const two= burger.querySelector(".two");
const three= burger.querySelector(".three");

const lines= [one,two,three];

burger.addEventListener('mouseenter', ()=>{
  timeline.staggerTo(lines, 0.25, {scaleX: 1.5, repeat:1, yoyo: true, ease: Power2.easeInOut, svgOrigin:"50 50"}, 0.125);
});

TweenMax.to(burger, 1, { ease: Bounce.easeOut, y: 240, delay: .4});

burger.addEventListener('click', (e) =>{
  e.preventDefault();
  wrapper.className= 'show';
});
```

```css
.html{
  margin: 0;
  padding:0;
  box-sizing: border-box;
}

body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  background: url(road.jpg) no-repeat 50% 50%;
  background-size: cover;
  overflow: hidden;

}

.main .wrapper {
display: flex;
flex-wrap: wrap;
}

.show{
  transition-delay:0s;
  visibility: visible;
  opacity: 1;
  transition: 1s all ease-in;
}

.hide{
  opacity: 0; visibility:hidden;

}

ul{

  list-style: none;
  display:flex;
  flex-direction: column;
}

li{
  margin-top: 1.75em;
  display: inline-block;
  text-align: center;
}

li a{
  text-decoration: none;
  color: #fff;
  /* font-family: */
  font-weight: lighter;
  font-size: 2rem;
  padding: 1.5px 30px;
  transition-duration: 170ms;
}

li a:hover{
  color: #fff;
  border: 1px solid #fff;
  border-radius: 14px;
}

.burger{
  position: absolute;
  top: 1.3rem;
  left: 1.4rem;
}
```

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="next.css">
  <title>Document</title>
</head>
  <body>

    <nav class="navbar">
      <span class="burger">
        <a href="#">
          <svg class="hb" width="50" height="50">
              <path class="one" d="M0,5 40, 5" stroke="#fff" stroke-width="5"/>
              <path class="two" d="M0,14 40,14" stroke="#fff" stroke-width="5"/>
              <path class="three" d="M0,23 40,23" stroke="#fff" stroke-width="5"/>
          </svg>
        </a>
      </span>

<div class="main">

    <div class="wrapper hide">
      <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Search</a></li>
      </ul>
    </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

<script src="next.js"></script>

  </body>
</html>
```

When i resize the window the bottom list items get cut off.

I'm not sure what's going on, if i need to add a media query to fix this or what.

I assumed the components of the page would kind of shrink along with the page as it's resized, please if you can help write a comment.
Thank You

It's asking me to add more details because it is mostly code, I'm not sure if there is a way around this because im new to the website, so im going to put some dummy text.

```
<div class="main">

<div class="wrapper hide">
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Search</a></li>
  </ul>
</div>

```

css:

```
.html{
  margin: 0;
  padding:0;
  box-sizing: border-box;
}

body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  background: url(road.jpg) no-repeat 50% 50%;
  background-size: cover;
  overflow: hidden;

}

.main{

}

.wrapper{
}

.show{
  transition-delay:0s;
  visibility: visible;
  opacity: 1;
  transition: 1s all ease-in;
}

.hide{
  opacity: 0; visibility:hidden;

}

ul{

  list-style: none;
  display:flex;
  flex-direction: column;
}

li{
  margin-top: 1.75em;
  display: inline-block;
  text-align: center;
}

li a{
  text-decoration: none;
  color: #fff;
  /* font-family: */
  font-weight: lighter;
  font-size: 2rem;
  padding: 1.5px 30px;
  transition-duration: 170ms;
}

li a:hover{
  color: #fff;
  border: 1px solid #fff;
  border-radius: 14px;
}

```