Issue with dropdown menu - html

Question

I have an issue with submenu, when i hovering on about section the dropdown menu width is more than it suppose to be.
What i did wrong and how can fix it?
Any other suggestion related to my css code would be appreciated.
JSFIDDLE
Here is my code:
* {
margin: 0;
padding: 0;
}
.main-nav ul {
margin-left: 40px;
margin-top: 40px;
list-style-type: none;
}
.main-nav>ul>li {
float: left;
}
.main-nav .active {
background-color: #0361D6;
}
.main-nav li a {
text-decoration: none;
font-size: 18px;
font-family: Verdana;
color: white;
}
.main-nav ul li {
padding: 20px 30px 20px 30px;
background-color: #066EFC;
}
.main-nav>ul>li {
border-right: 1px solid #0858C5;
}
.main-nav ul>li:last-child {
border-right: none;
}
.main-nav li {
border-bottom: 3px solid #0B418B;
}
.main-nav li:hover {
cursor: pointer;
background-color: #0361D6;
color: #C4C4C4;
}
.sub-nav ul {
display: none;
}
.sub-nav li {
border-bottom: 1px solid black;
}
.sub-nav {
padding: 0px;
float: none;
position: absolute;
top: 65px;
left: 85px;
overflow: hidden;
}
nav ul li:hover ul {
display: block;
}
<nav class="main-nav">
<ul>
<li class="active">Home</li>
<li>About
<nav class="sub-nav">
<ul>
<li>Company</li>
<li>Workers</li>
</ul>
</nav>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>

Answer 1

I got the solution which you might be looking for. Refer to the link below...
https://jsfiddle.net/Dhruvil21_04/x40psw2c/1/
OR
Replace your 4 css selctors as given below...
/*--------Replace-------*/
.sub-nav {
padding: 0px;
float:none;
position: absolute;
top: 100%;
left: 0;
overflow: visible;
width: 100%;
}
.main-nav li:hover {
cursor:pointer;
background-color: #0361D6;
color: #C4C4C4;
position: relative;
}
/*--------Add-------*/
.main-nav ul ul > li {
padding: 20px 10px;
text-align: center;
}
.main-nav ul ul {
margin: 0;
padding: 0;
left: 0;
}