Drop Down Menu does not stay centered when browser resize - html

Question

The problem I am having is the formatting of the CSS once the windows resize to smaller. I have been having a lot of trouble, and think that the problem lies in my initial code; I just am not sure where.
I am pretty new to coding and hoping to learn.
.nav-main {
position: absolute;
top: 0;
height: 65px;
width: 100%;
text-align: center;
}
.nav-main ul {
position: relative;
margin: 0 auto;
padding: 0;
list-style: none;
font-size: 22px;
line-height: 100%;
font-family: 'Futura W01 Bold', sans-serif;
text-align: center;
text-transform: uppercase;
display: inline-block;
width: 100%;
}
.nav-top {
position: relative;
margin: 0;
padding: 0 66px 0 50px;
float: none;
display: inline-block;
list-style: none;
}
.nav-top:first-child {
padding-left: 0;
}
.nav-top:last-child {
background-image: none;
padding-right: 0;
}
.nav-top:last-child:after {
content: none;
}
.nav-top > a {
position: relative;
display: block;
margin: 0;
color: #6f6f6f;
text-decoration: none;
padding-top: 20px;
padding-bottom: 5px;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-top a:hover,
.nav-top.active > a {
color: #454545;
border-bottom: 4px solid #00e9d9;
text-decoration: none;
}
.nav-top ul {
display: block;
position: absolute;
left: -8.75px;
width: 105%;
top: calc(100% - 1px);
border-bottom-left-radius: .3em;
border-bottom-right-radius: .3em;
}
.nav-top:hover ul {
position: absolute;
top: calc(100% - 1px);
left: -8.75px;
width: 105%;
}
.nav-top li {
float: center;
background-color: #e9e9e9;
padding-top: 16px;
padding-bottom: 10px;
text-align: inherit;
}
.nav-top li:last-child {
padding-bottom: 16px;
border-bottom-left-radius: .3em;
border-bottom-right-radius: .3em;
}
.nav-top li > a {
position: relative;
display: inline;
margin: 0;
color: #6f6f6f;
text-decoration: none;
padding-top: 20px;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-top:after {
display: block;
position: absolute;
left: 100%;
top: -17px;
width: 22px;
z-index: 1;
transform: translateX(-50%);
height: 100%;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
#media only screen and (max-width:960px) {
.nav-main ul {
font-size: 18px;
}
.nav-top ul {
font-size: 15px;
}
.nav-main li {
padding: 0 46px 0 30px; /* 0 66 0 50 */
}
.nav-top li {
padding-top: 11px;
text-align: center;/* top 16 bottom 10*/
float: center;
}
<nav class="nav-main" role="navigation">
<ul>
<li class="nav-top">Welcome</li>
<li class="nav-top">About
<ul class="drop-down">
<li class="nav-drop">Services</li>
<li class="nav-drop">Clients</li>
<li class="nav-drop">Press</li>
<li class="nav-drop">Leadership</li>
<li class="nav-drop">Follow Us</li>
</ul>
</li>
<li class="nav-top">Contact</li>
</ul>
<span class="nav-arrow"></span>
</nav>
JSFIDDLEJS fiddle

Answer 1

Your .nav-main li on #media only screen and (max-width:960px) is affecting it.
You could either use the :not selector .nav-main li:not(.nav-drop) or overwrite the .nav-drop with padding-left: 0; padding-right: 0.
Don't forget to revise it in case you use other media queries.
JSFiddle