Menus come down on browser resize - html

Question

I have been facing problem for my horizontal menu bar code.
This menu bar displays correctly for 1366 x 768 resolution
but after pressing ctrl - short key
when I reduce browser size using ctrl - short key my menus come down. I have tried both em and px units to be used for this problem but it does not seem to solve the problem. I want to clarify that menu bar must be in center as the other things in whole page and should be expanded for the whole 960px setting for wrapper. I need help for sorting out this problem.
Below is my source code
HTML
<nav>
<div class="nav_wrapper">
<div class="menu_box">
<div id='cssmenu'>
<ul>
<li><span>Home</span></li>
<li><a href='#'><span>About Us</span></a></li>
<li><a href='#'><span>Courses</span></a>
<ul>
<li><a href='index.php'>AGP Program</a></li>
<li><a href='index.php'>Web Program</a></li>
</ul>
</li>
<li><a href='#'><span>Partners</span></a></li>
<li><a href='#'><span>Consultancy</span></a></li>
<li><a href='#'><span>News n Events</span></a></li>
<li><a href='#'><span>Gallery</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</div>
</div>
</nav>
CSS
/* MEDIA QUERIES FOR A RESPONSIVE LAYOUT */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Arial', sans-serif;
letter-spacing:0.4px;
font-size: 14px;
position: relative;
}
#cssmenu a {
line-height: 1.5;
}
#cssmenu {
width: 100%;
background: #fff;
}
#cssmenu > ul {
border: 1px solid #000000;
margin-left:auto;
margin-right:auto;
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
background: #565656;
background: -moz-linear-gradient(#565656 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
background: -webkit-linear-gradient(#565656 0%, #323232 100%);
background: linear-gradient(#565656 0%, #323232 100%);
}
#cssmenu > ul:after {
clear: both;
content: '';
display: table;
}
#media all and (max-width: 480px) {
#cssmenu > ul {
max-height: 32px;
overflow: hidden;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
}
#cssmenu.expand ul {
max-height: 900px;
}
}
#cssmenu > ul > li {
border-right: 1px solid #000000;
-moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
float: left;
}
#cssmenu > ul > li.mobile {
display: none;
}
#cssmenu > ul > li.active {
background: #444444;
background: -moz-linear-gradient(#444444 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444444), color-stop(100%, #323232));
background: -webkit-linear-gradient(#444444 0%, #323232 100%);
background: linear-gradient(#444444 0%, #323232 100%);
}
#media all and (max-width: 480px) {
#cssmenu > ul > li {
border-right:1px solid #000000;
-moz-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
display: block;
float: none;
}
#cssmenu > ul > li.mobile {
display: block;
}
#cssmenu > ul > li.mobile i {
float: right;
font-style: normal;
}
}
#cssmenu > ul > li:last-child {
border-right: 0px solid #000000;
-moz-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
-webkit-border-radius: 0 0px 4px 0;
-moz-border-radius: 0 0px 4px 0;
border-radius: 0px;
}
#cssmenu > ul > li:last-child ul {
left: auto;
right: 0;
}
#cssmenu > ul > li.mobile {
border-right: 0 none;
-moz-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
}
#cssmenu > ul > li > a {
margin: 0 0 2px 0;
font-size: 12px;
display: block;
color: #ffffff;
text-shadow: 0 1px 1px #000;
}
#cssmenu > ul > li > a > span {
display: block;
padding: 6px 2.61em;
font-weight: bold;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
color: #fff;
text-shadow: 0 1px 1px #000;
}
/* Sub menu */
#cssmenu ul ul {
background: linear-gradient(to bottom, #333333 0%, #000000 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);border: 1px solid #e5e5e5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 2px;
-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
padding: 5px 12px;
display: none;
position: absolute;
top: 33px;
left: 0;
width: 110px;
z-index: 1;
}
#media all and (max-width: 480px) {
#cssmenu ul ul {
position: relative;
top: 0;
width: 92%;
}
}
#cssmenu ul ul li {
padding: 3px 0;
}
#cssmenu ul ul a {
color: #999999;
display: block;
font-size: 12px;
font-weight: bold;
}
#cssmenu ul ul li a:hover {
color: #ffffff;
}
/* Menus */
#media only screen and (min-width: 1000px)
{
.middle_section{
width:100%;
background-color:#D6D6D6;
/* background:linear-gradient(to bottom, #C40302 0%, #9E0302 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); */
}
nav{
background: linear-gradient(#565656 0%, #323232 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
clear: both;
padding-bottom:10px;
padding-top:10px;
position: relative;
width:100%;
}
.nav_wrapper{
background: linear-gradient(#565656 0%, #323232 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
width:960px;
margin-left:auto;
margin-right:auto;
}
}

Answer 1

This might be simply solved by adding min-width to on of the wraping elements, in this case I finde it to work better when applied to "nav_wrapper". Also, when working with an element bigger than the display, it's good to have no margin in the body element, so I changed that too.
Here's the changes I made
CSS
body{
margin: 0px;
}
.nav_wrapper{
min-width: 980px;
}
LIVE DEMO