There is a wrapper. then there is header 10%; then section: min-height:80%; height auto;
screenshot ---> This is overlapping going under header when i scroll, the content goes under the header. I want things to stop there... Screenshot---> This is normal
#wrapper{
position:absolute;
padding-top:50px;
height:100%;
width:100%;
top:150px;
left:0;
margin:0;
border:2px soild green;/**/
}
header {
position:fixed;
top:0;
left:0;
background-color:#2e72ce;
float:top;
color:black;
text-align:center;
margin:0;
opacity:0.4;
padding:0px;
overflow-x:hidden;
width:100%;
height:calc(10% - 9px);
z-index:9999;
clear:both;
}
#main_section {
position:relative;
top:-50px; /*-5px proper location */
float:left;
padding-top:0;
padding-left:60px;
width:95%;
bottom:0;
right:0;
min-height:80%;
height:auto;
border:2px solid red;/**/
}
<html><!----HTML FIle---->
<body >
<div id="wrapper">
<header>
<img src="img/ztlogo.png" height="50px"/>
</header>
<section id="main_section">
This is happening because of your opacity in that header color - hence what's behind it, you can see through.
A simple fix could be to add another white div behind the blue opaque color. But, you want to make it to where you can't see through the header.