Alignment of Navigation Menu - html

Question

I'm trying to get my sub-menu to align left. The team names are spilling over. Either it needs aligned left or I need to widen the sub-menu. I think I am just over-looking what needs to be done, but I just can't figure it out.
nav {
background-color: #000;
border: 1px solid #000;
border-radius: 4px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
color: #888;
display: block;
margin: 8px 22px 8px 22px;
overflow: hidden;
width: 90%;
text-align: center;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
list-style-type: none;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
nav > ul > li > a > .caret {
border-top: 4px solid #FFF;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
display: inline-block;
height: 0;
width: 0;
vertical-align: middle;
-webkit-transition: color 0.1s linear;
-moz-transition: color 0.1s linear;
-o-transition: color 0.1s linear;
transition: color 0.1s linear;
}
nav > ul > li > a {
color: #FFF;
display: block;
line-height: 56px;
padding: 0 24px;
text-decoration: none;
}
nav > ul > li:hover {
background-color: rgb(40, 44, 47);
}
nav > ul > li:hover > a {
color: rgb(255, 255, 255);
}
nav > ul > li:hover > a > .caret {
border-top-color: rgb(255, 255, 255);
}
nav > ul > li > div {
background-color: rgb(40, 44, 47);
border-top: 0;
border-radius: 0 0 4px 4px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
display: none;
margin: 0;
opacity: 0;
position: absolute;
width: 165px;
visibility: hidden;
z-index: 100;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
nav > ul > li:hover > div {
display: block;
opacity: 1;
visibility: visible;
}
nav > ul > li > div ul > li {
display: block;
}
nav > ul > li > div ul > li > a {
color: #fff;
display: block;
padding: 12px 24px;
text-decoration: none;
}
nav > ul > li > div ul > li:hover > a {
background-color: rgba(255, 255, 255, 0.1);
}
<nav>
<ul>
<li>Home
</li>
<li>Teams <span class="caret"></span>
<div>
<ul>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</nav>