when I scroll down on small screen in Chrome there is white space above header?

hello,
when I make the screen small and scroll down there is a white space above the header.
this is only happening in Chrome. other browsers like Firefox,edge and Opera there is no such a problem. I tried every possible tricks but it didn’t help.
my header.php is :

<div class="container-fluid">
	  

		
	  
	
	<div class="site-header-before row">
<div class="site-title col-lg-4">
			David Auto Service
		</div>
		<div class="site-header-section2 col-lg-4">
			hello
		</div>
		<div class="site-header-section3 col-lg-4">
			hello
		</div> 	 </div>	  
	
	<div class="site-header row">
	
	  </div> </div> 

and the css for small screen :

 @media only screen
and (max-width :575px)
 {
	 	 
	
h1.entry-title {
			display:none;
		}
	  
	.site-header-before { 
  width: 100%;
  height: 80px;
  position: fixed;    
  	
  background-color:#000000;
 
  box-sizing: border-box;
 
} 
	 .site-header {
		background-color:#191919;
		 width:100%;
 
  height: 40px;
       position: fixed;    
  z-index: 1;	
  	margin-top:0.5em;
  
  box-sizing: border-box;
		}
	 .
	
	.site-title {	 
   
	margin-top:0.5em;	
	padding-left:2.5em;
	color:#fff;
	font-size:1.2em; 
	 
	}
.site-description { 
  margin-top:-0.5em;
	padding-left:1.2em;
	color:#003145;
    font-size:1em; 
}
	 
	 
	 
	 
	 
	.site-header-section2{	
		display:none;
	}
		.site-header-section3 {	
			display:none;
		}
	 .slider{
		 margin-top:3.5em;
		
	 }
	
.wrapper{
    width:90%;
    margin: 0 auto;
	
}
		
}

how I can solve this problem . what is the problem with the chrome?
thanks very much

The page I need help with: [log in to see the link]