in edge and safari the texten in header section are deflecting!

You have .item3 { text-align: end;} in a few places. “end” is not a universally recognized value so you get the default left align. Try “right” instead for all such occurrences.

thanks,
I have changed the end to right.
it solved the problem with edge .
now chrome,opera,firefox and edge are showing in the right way.
but the problem still exists with safari.
I have installed safari 5.1.7 for windows on my windows 10.
it is deflecting the texts in the middle and on the right corner in the header section.
what can be the problem with safari if the other 4 browsers showing right.
or how I can solve this problem with safari?
johan

I have fixed a lot of things,
now my html code is:

<div class="site-branding">
			<div class="grid-container">
			<div class="site-title item1">
			<h2>David's Auto Service
						</h2> 
		</div>
					
		<div class="site-header-section2 item2"><h3>
				
				 40 jaar ervaring <br> Keur meester  	</h3>			</div>  
			<div class="site-header-section3 item3"> <h3>
				
			 Tel:xxxxxxxx<br>
			   Mob:xxxxxxxx	<br>
			 Email:xxxxxx	</h3>	</div> 
	</div>				
			
			</div>
			
		</div><!-- .site-branding -->

and my css code is :

.site-header {
 
  width: 100%;
  height: 135px;
  position: fixed;    
  z-index: 1000;	
  background:blue;	
  border: 1px solid blue;
  box-sizing: border-box;
}

 .site-title {
	margin-top:-1em;				   
				  
    margin-left:0em;	
	}
	
	.item2 {
		margin-top:-5em;
		margin-left:1.5em;
		text-align:center;
		
	}
	.item3{
	margin-top:-4.5em;
	text-align:right;		
	margin-right:2.5em;
	
		
	}

 .grid-container {
  display: grid;
  grid-template-columns:  auto auto auto;
}

.site-footer  {
	width: 100%;
  height: 125px;	
  background:blue;	
  border: 1px solid blue;
  box-sizing: border-box;
	
	
}

@media   (max-width : 45em) {
	h2 {
		
	font-size:1.25em;	
		
	}
	h3{
		font-size:1em;
		
	}
 .item2{
	display:none;	
	}
	.item3{
		display:none;
		
	}
	}

@media  (max-width : 51.25em)  
	      {
			  
 h2 {
		
	font-size:1.25em;	
		
	}
	h3{
		font-size:1em;
		
	}	
}

@media  (max-width : 76.5em)   {

}

 @media  (max-width : 114em) {
				   
	 
				   
				   
}

all 4 browsers are showing in the right way the header section ( Chrome,Edge,Firefox,Opera)
besides the Safari.
in Safari there is deflection on the top margin only for site-header-section2 (item2) and site-header-section3 (item3). but the site-title top margin is OK.
I am thinking that this css grid is not working on Safari.
what do you think or how I can fix this problem?
my url is again :https://webdesignleren.com/
you have to look in Safari and Chrome to see what I mean.
I am waiting for an answer if it is possible.
thanks
johan

after searching long I found that css grid is supported by Safari version 10.1 and up.
plus I found that bootstrap4 is not supported on Safari installed on Windows 10.
so it can also be a problem .
plus I see that Safari by Apple is not recommended to install on Windows.
thanks
johan