Glad you fixed it 
I did post a reply a few hours ago but discourse seems to have not posted it but luckily its saved so I am posting it again even though its too late now
Here is a rough re-jig of your code to show how the menu and red bar should be placed.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="mbcsmbl6h0.css" type="text/css" />
<style>
html, body {
margin:0;
padding:0;
}
body {
background-image:url(../images/bgs/pgBackground.jpg);
background-attachment: fixed;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/*this code below is the
first wrapper after body*/
.mainEnvelope {
position: relative;
}
header {
min-height: 6rem;
color:chartreuse;
letter-spacing: .2em;
font-size: 36px;
text-align: center;
}
/*this code below is the
wrapper for all the header area content;
and they include header,
nav and ite child ul and grand child li */
.pageNavContainer {
width:99.8%;
margin: 1rem auto;
background:rgb(255, 0, 0);
height: 3rem;
border-radius: 0 10px 10px 0;
}
.navwrap {
color:chartreuse;
font-weight: 800;
box-shadow: 0 0 13px rgba(0,0,0,0.5);
border:1px solid yellow;
width:15%;
height:100%;
}
.nav {
position:relative;
}
ul{margin:0;padding:0;list-style:none;}
.nav ul {
position:absolute;
top:0;
left:-999em;
height:0;
max-height:0;
-webkit-transition: top .2s ease 0s;
-moz-transition: top .2s ease 0s;
-ms-transition: top .2s ease 0s;
-o-transition: top .2s ease 0s;
transition: top .2s ease 0s;
}
.nav a{display:block;}
.nav > li,.nav > li > a{height: 3rem;}
.nav:hover ul {
max-height: 1000px;
left:auto;
top:100%;
height:auto;
width:100%;
}
nav:hover ul li{width:100%;}
/*this code below is the
wrapper for the main page content
kown as body text. it wraps three classes known as flexOrder1, 2, and 3, which also wraps three different element individually.
within themselves. */
#mainWrapper {
border-radius: 30px 30px 0 0;
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
min-height: 500px;
width: 68%;
background: #fff;
margin:-2rem auto 0;
padding: .5em;
}
.flexOrder1 {
padding: 0;
margin: 0;
order: 1;
width: 79%;
margin-right: .5%;
border-right: .5px dotted #ccc;
}
.flexOrder2 {
padding: 0;
margin: 0;
order: 2;
width: 20%;
margin: 1rem 0;
padding: 0;
}
.flexOrder3 {
padding: 0;
margin: 0;
order: 3;
width: 100%;
margin: 1rem 0;
padding: 0;
}
main {
padding: 0;
margin: 0;
width: 99%;
margin-right: 1%;
}
aside {
padding: 0;
margin: 0;
width: 99%;
margin-right: 1%;
}
footer {
padding: 0;
margin: 0;
width: 100%;
margin: 0;
}
</style>
</head>
<body>
<div class="mainEnvelope">
<header>Header</header>
<div class="pageNavContainer">
<nav class="navwrap">
<ul id="mbl6h0ebul_table" class="mbl6h0ebul_menulist nav">
<li> <a href="#nogo"><img src="../images/bgs/Down.ico" style="width:27px; height:28px;float:left; margin-right:.5em;">Navigation</a>
<ul>
<li class="spaced_li"><a href="#"><img id="mbi_mbl6h0_1" src="mb_home.gif" name="mbi_mbl6h0_1" width="95" height="30" style="vertical-align: bottom;" border="0" alt="Home" title="" /></a></li>
<li class="spaced_li"><a href="#"><img id="mbi_mbl6h0_2" src="mb_about_us.gif" name="mbi_mbl6h0_2" width="95" height="30" style="vertical-align: bottom;" border="0" alt="About Us" title="" /></a></li>
<li class="spaced_li"><a href="#"><img id="mbi_mbl6h0_3" src="mb_programs.gif" name="mbi_mbl6h0_3" width="95" height="30" style="vertical-align: bottom;" border="0" alt="Programs" title="" /></a></li>
<li class="spaced_li"><a href="#"><img id="mbi_mbl6h0_4" src="mb_services.gif" name="mbi_mbl6h0_4" width="95" height="30" style="vertical-align: bottom;" border="0" alt="Services" title="" /></a></li>
<li class="spaced_li"><a href="#"><img id="mbi_mbl6h0_5" src="mb_support.gif" name="mbi_mbl6h0_5" width="95" height="30" style="vertical-align: bottom;" border="0" alt="Support" title="" /></a></li>
<li class="spaced_li"><a href="#"><img id="mbi_mbl6h0_6" src="mb_news_media.gif" name="mbi_mbl6h0_6" width="95" height="30" style="vertical-align: bottom;" border="0" alt="News/Media" title="" /></a></li>
<li><a><img id="mbi_mbl6h0_7" src="mb_company.gif" name="mbi_mbl6h0_7" width="95" height="30" style="vertical-align: bottom;" border="0" alt="Company" title="" /></a></li>
</ul>
</li>
</ul>
</nav>
</div>
<section id="mainWrapper">
<div class="flexOrder1">
<main>
<h2>Main 1</h2>
Hi i have an image to use for my pages background, the page width will be Hi i have an image to use for my pages background, the page width will be 80% of the view-port. </main>
</div>
<div class="flexOrder2">
<aside>
<h2>Aside 2</h2>
view-port. my bg image is 200px x 200px.ool block </aside>
</div>
<div class="flexOrder3">
<footer>
<h2>Footer 3</h2>
Footer datax 200px. what properties am i to use to have it span the page without me seeing borders or </footer>
</div>
</section>
<script type="text/javascript" src="mbjsmbl6h0.js"></script>
</body>
</html>
As this is a learning exercise I suggest you just copy the code and test it in a browser and then play around with it.
The nav is position relative ad the red bar is a separate element form the main content. The nav dropdown menu is absolutely placed and will not upset the layout.
Note that there is no such thing as .5px of a border and don;t try to micromanage everything to the nth degree,