CSS miss aligned element cannot get it into place - html

Question

On oxfordmakespace.com i have two boxes that you can see when you put your browser into portrait by making it thinner than taller.
as you can see one is higher than the other, it is .nav2 i cannot get it back in place. Can some one help please?
This is the CSS for desktop view
/* navbar desktop */
.nav {
float:right;
width: 40%;
background-color: #612;
height: 30px;
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
}
.nav ul {
list-style: none;
margin: 0 auto;
padding: 0 0 0 10px; //reset default padding
}
.nav li {
float: right;
display: inline;
}
.nav a, .nav a:link, .nav a:visited {
float: left;
padding: 5px 5px 5px 5px;
color: white;
display: inline-block;
height: 20px;
}
.nav a:active, a:visited {
color: Black;
}
.nav .current a {
background: #499;
color: black; /*this changes the desktop view current link*/
border-radius: 5px;
}
.nav a:hover, .nav a:active, .nav .active a:link, .nav .active a:visited {
background: #253;
}
/*<!----------------------------------------------------------------->*/
.nav2 {
float:left; /*desktopbackground*/
width: 40%;
background-color: #612;
height: 30px;
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
}
.nav2 ul {
list-style: none;
margin: 0 auto;
padding: 0 0 0 10px; //reset default padding
}
.nav2 li {
float: left;
display: inline;
}
.nav2 a, .nav2 a:link, .nav2 a:visited {
float: right;
padding: 5px 5px 5px 5px;
color: white;
display: inline-block;
height: 20px;
}
.nav2 a:active, a:visited {
color: Black;
}
.nav2 .current a {
background: #499;
color: black; /*this changes the desktop view current link*/
border-radius: 5px;
}
.nav2 a:hover, .nav2 a:active, .nav2 .active a:link, .nav2 .active a:visited {
background: #253;
}
This is the css for portrait mode
.nav {
width: 100%;
position: relative;
min-height: 40px;
background-color: #999;
margin: 0px 0;
}
/*a {
color: Black;
height: 20px;
display: block;
}*/ /*No longer used*/
.nav ul {
width: 50%;
padding: 2% 2% 2% 2%; /*this controls the displayed word padding*/
position: absolute;
top: 0; /*physical position of box holding links*/
left: 46%; /*physical position of box holding links*/
border: solid 0px #aaa;
background: #fff url(Images/topright.png) no-repeat ; /*background color for links*/
background-size: 15% 75%; /*changes for image*/
background-position: 90% 50%;
}
.nav li {
width: 100%;
text-align: left;
float: left;
display: none; /* hide all <li> items */
margin: 0;
}
.nav .current {
padding: 0 0 10px 0 ;
Background: none;
pointer-events: none; /*allows you to click on the menu usinga touch screen and not make the page load*/
display: block; /* show only current <li> item */
}
.nav .current a {
background: none;
color: Black; /* changes current links color when not active*/
}
/*-----------------------------------------------------*/
.nav a {
display: block;
padding: 3% 5% 3% 10%;
text-align: Left;
color: black; /*changes every text item in mobile menu*/
font-size: 150%;
font-style: Arial,serif-sans;
}
.nav a:link {
color: black;
}
.nav a:hover { /*changes the moused over or selected link in nav bar*/
border-radius: 5px;
color: black;
background: lightgreen;
}
/*-------------------------------------------------------*/
/* on nav hover */
.nav ul:hover {
background-image: none;/*hides the background image when the navbar exands to stop it stretching*/
}
.nav ul:hover li {
display: block;
margin: 0 0 15px; /*space between each menu item*/
}
/*NAVBAR--------------------------*/
.nav2 ul {
width: 35%;
padding: 2% 2% 2% 2%; /*this controls the displayed word padding*/
position: absolute;
top: 00%; /*physical position of box holding links*/
left: 2.5%; /*physical position of box holding links*/
border: solid 0px #aaa;
background: #fff url(Images/topright.png) no-repeat ; /*background color for links*/
background-size: 15% 70%; /*changes for image*/
background-position: 10% 50%;
}
.nav2 li {
width: 100%;
text-align: left;
float: left;
display: none; /* hide all <li> items */
margin: 0;
}
.nav2 .current {
padding: 0 0 10px 0 ;
Background: none;
pointer-events: none; /*allows you to click on the menu usinga touch screen and not make the page load*/
display: block; /* show only current <li> item */
}
.nav2 .current a {
background: none;
color: Black; /* changes current links color when not active*/
}
/*-----------------------------------------------------*/
.nav2 a {
display: block;
padding: 3% 5% 3% 10%;
text-align: Left;
color: black; /*changes every text item in mobile menu*/
font-size: 150%;
font-style: Arial,serif-sans;
}
.nav2 a:link {
color: black;
}
.nav2 a:hover { /*changes the moused over or selected link in nav bar*/
border-radius: 5px;
color: black;
background: lightgreen;
}
/*-------------------------------------------------------*/
/* on nav hover */
.nav2 ul:hover {
background-image: none;/*hides the background image when the navbar exands to stop it stretching*/
}
.nav2 ul:hover li {
display: block;
margin: 0 0 15px; /*space between each menu item*/
}
/*-------------------------------------------------------*/
} /*media query end--------------------------*/
I need it to be in the same position as the other one.

Answer 1

When your media query hits that break point remove position: relative; from .nav or set it to position: static if you're using media queries to just overwrite your desktop css
#media only screen and (max-width: 600px) and (min-width: 150px), (orientation: portrait)
.nav {
width: 100%;
/*position: relative;*/ //remove or set to position: static
min-height: 40px;
background-color: #999;
margin: 0px 0;
top: 0;
}
That will cause your header to just align to the top of the document instead of be contained within its parent