there is white space vertically between the texts in chrome but not in firefox?

I have inserted row class like this:

<div class="box-container">	
		
<div class="item item1 active">
		<div class="row1">		
 <h2>Direct-Bellen</h2>  <br>
	<p>Tel:0zz-4xx12xc </p> <br>
	<p1> Mob:064xcyesdg </p1> 

</div> </div>
		
		
<div class="item item2">
	<div class="row2">
<h2>Openingstijden</h2> <br>
<p>Ma t/m vrij 08:00 -18:00 </p> <br>	
	<p1>Zaterdag 08:30 -12:00 </p1>
      <p2> Zondag Gesloten</p2>
	</div>  
	</div>
		
<div class="item item3">
<div class="row3">	
<h2>Adres</h2> <br>
<p>KLoaaaaamzp 122 </p> <br>
	<p1>3156XX XXXCVLIXT </p1>
			
	  </div>
		</div>
		</div>

and the css:

	.box-container {
  width: 100%;
  height: 100px; 
  border: 1px solid #4b5054;  
  background-color: #4b5054;
  display: flex;
  flex-direction:row;  
  overflow:hidden;
}

.item {
  opacity: 0;
	width:100%;
  transition: opacity 1s ease-in-out;
   display:none; /* hide all items initially */

	
}

.item.active {
  opacity: 1;	 
   	display: flex; /* Show the active item */

}
		.row1 {
		width:100%;
		display:flex;
		flex-direction:column;	
		}	
		
		
		.row2 {
		width:100%;
		display:flex;
		flex-direction:column;	
		}	
		
		
		.row3 {
		width:100%;
		display:flex;
		flex-direction:column;	
		}	
		
		
	  
		
		
		
		
		.item1 h2 {				
			display:flex; 
			justify-content: center;
            align-items:center;
            text-align: center;
		margin-top:0.5rem;
		 font-size: 1.4rem;
         color:#ffd978;
				font-family: 'Ravi Prakash', cursive;
		}
		.item2 h2{
		
			display:flex;
				justify-content: center;
              align-items:center;
             text-align: center;
			margin-top:0.5rem;
			 font-size: 1.4rem;
          color: #ffd978;
		font-family: 'Ravi Prakash', cursive;
		}
		
		.item3 h2 {
	
		display:flex;		
		justify-content: center;
        align-items:center;
          text-align: center;
		margin-top:0.5rem;
		 font-size: 1.4rem;
        color: #ffd978;
			font-family: 'Ravi Prakash', cursive;
		}
		


.item p {
	
	display:flex;	
		justify-content: center;
	     text-align: center;	
  font-size: 1rem;
  line-height: 0.8;
  color: white;  
  margin-top:-0.35rem;
	font-family: 'Ravi Prakash', cursive;
}

.item p1 {
	
	display:flex;		
		justify-content: center;
         text-align: center;
  font-size: 1rem;
  line-height: 0.8;
  color:white;
  margin-top:-1.5rem;  
	font-family: 'Ravi Prakash', cursive;
}

.item p2 {
	
	display:flex;	
	justify-content: center;
	text-align: center;
  font-size: 1rem;
  line-height: 0.8;
  color: white;
  margin-top:-0.05rem;
	font-family: 'Ravi Prakash', cursive;
} 

but the problem is the same . on firefox it is looking very wel but on Chrome there is white spaces between the columns.

I tried to use webkit with display flex and flex-direction it didn’t help either.

I want to be sure is this problem can be solved with webkit or the problem is in coding somewhere?

thanks

I have solved this puzzle like this.

first I added row class:

	<div class="box-container">	
			
			
<div class="item item1 active">	
	<div class="row">
 <h2>Direct-Bellen</h2>  <br>
	<p>Tel:0zz-4xx12xc </p> <br>
	<p1> Mob:064xcyesdg </p1> 

		</div>  </div>
		
			
<div class="item item2">
	<div class="row">
<h2>Openingstijden</h2> <br>
<p>Ma t/m vrij 08:00 -18:00 </p> <br>	
	<p1>Zaterdag 08:30 -12:00 </p1>
      <p2> Zondag Gesloten</p2>
	</div>  </div>
		
<div class="item item3">
	<div class="row">
<h2>Adres</h2> <br>
<p>KLoaaaaamzp 122 </p> <br>
	<p1>3156XX XXXCVLIXT </p1>
			
	  </div>
		</div>
		</div>

and I made CSS like this:

.box-container {
  width: 100%;
  height: 100px; 
  border: 1px solid #4b5054;  
  background-color: #4b5054;
  display: flex;
  flex-direction:row;  
  overflow:hidden;
}

.item {
  opacity: 0;
	width:100%;
  transition: opacity 1s ease-in-out;
   display:none; /* hide all items initially */

	
}

.item.active {
  opacity: 1;	 
   	display: flex; /* Show the active item */
}
		.row {
	  
		width:100%;

		}	
		
		
		
		
	  
		
		
		
		
		.item1 h2 {				
			display:flex; 
			justify-content: center;
            align-items:center;
            text-align: center;
				flex-direction:column;
		margin-top:0.5rem;
		 font-size: 1.4rem;
         color:#ffd978;
				font-family: 'Ravi Prakash', cursive;
		}
		.item2 h2{
		
			display:flex;
			flex-direction:column;
				justify-content: center;
              align-items:center;
             text-align: center;
			margin-top:0.5rem;
			 font-size: 1.4rem;
          color: #ffd978;
		font-family: 'Ravi Prakash', cursive;
		}
		
		.item3 h2 {
	
		display:flex;
			flex-direction:column;
				justify-content: center;
        align-items:center;
          text-align: center;
		margin-top:0.5rem;
		 font-size: 1.4rem;
        color: #ffd978;
			font-family: 'Ravi Prakash', cursive;
		}
		


.item p {
	
	display:flex;	
		justify-content: center;
	     text-align: center;	
  font-size: 1rem;
  line-height: 0.8;
  color: white;  
  margin-top:-1.75rem;
	font-family: 'Ravi Prakash', cursive;
}

.item p1 {
	
	display:flex;		
		justify-content: center;
         text-align: center;
  font-size: 1rem;
  line-height: 0.8;
  color:white;
  margin-top:-2.75rem;  
	font-family: 'Ravi Prakash', cursive;
}

.item p2 {
	
	display:flex;	
	justify-content: center;
	text-align: center;
  font-size: 1rem;
  line-height: 0.8;
  color: white;
  margin-top:-0.05rem;
	font-family: 'Ravi Prakash', cursive;
} 

I set the row only width:100% otherwise it is deforming.

I solved in the end after trying every possible situation.

now it looks in chrome and firefox the same.

thanks