I have a drop-down menu inside a nav. Its parent has a max-width of 500px.
I want the drop-down to open on entire page.

I tried using 100vw but that way the dropdown is not aligned properly.
Additionally I cant move my navbar outside the max width container.

Check the code here - <https://codepen.io/chiragjain94/pen/Vwwbwop?editors=1100>

```
<div class="max">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Tutorials</a>
        <ul>
          <li><a href="#">Photoshop</a>             </li>
          <li><a href="#">Illustrator</a>           </li>
        </ul>
      </li>
      <li><a href="#">User Experience</a></li>
    </ul>
  </nav>

```

Css

```
.max{
 max-width:500px; 
  margin: 0 auto;
}
nav {
  text-align:center;
  width: 100%;
  background: #bebebe;
  padding: 0;
  margin: 0;
  height: 60px;
  position:relative;
}

nav ul {
  background: #bebebe;
  list-style:none;
  padding:0 20px;
  margin: 0;
  height: 60px;

}

nav ul li {
  display: inline-block;
}

nav ul li a {
  color:#333333;
  display:block;
  padding:0px 40px;
  text-decoration:none;
  float: left;
  height: 60px;
   line-height: 60px;
}

nav ul li:hover {
  background: #333333;
}

nav ul li:hover > a{
    color:#FFFFFF;
}

nav ul li:hover > ul {
  display:block;
}

nav ul ul {
  background: red;
  padding:0;
  text-align: center;
  display:none;
   width: 100vw;
  position: absolute;
  top: 60px;
  left:-0px;
  right:0px;

}

```

Dropdown menu is taking 100vw width but how can I get it to left 0 of entire page??