image not looking good in firefox as it looks in chrome - html

Question

I am having the problem which is the image on my chrome is looking perfectly fine as it is shown in the screenshot given below but in firefox it is not looking fine as it looks like in chrome
This is how it looks in Firefox.
And this is how it looks in Chrome.
HTML
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> -->
<div class="desti-tab-row col col-sm-12 no-padding">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active safetyandsecurity" data-toggle="tab"
href="#safetyandsecurity">SAFETY AND SECURITY
</a></li>
<li class="nav-item"><a class="nav-link comfortandconvenience" data-toggle="tab"
href="#comfortandconvenience">COMFORT AND CONVENIENCE
</a></li>
<li class="nav-item"><a class="nav-link environmental" data-toggle="tab" href="#environmental">ENVIRONMENTAL</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane container active" id="safetyandsecurity">
<div class="row">
<div class="content-info col col-sm-6 no-l-padding">
<h3 class="red-title">SAFETY AND SECURITY</h3>
<div class="container">
<div class="row">
<div class="col-sm-6">
<ul>
<li class="list-item"><img class="sec_cam"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/sec-cam.png">
<span>24HR CCTV MONITORING</span>
</li>
<li class="list-item"><img class="cctv"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/cctv.png">
<span>CCTV CONTROL ROOM</span>
</li>
<li class="list-item"><img class="sec_personnel"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/sec-personnel.png">
<span>SECURITY PERSONNEL ON-DUTY AROUND THE CLOCK</span>
</li>
<li class="list-item"><img class="entry_exit"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/entry_exit.png">
<span>ENTRY AND EXIT CONTROLLED BY ACCESS CARD SYSTEM</span>
</li>
<li class="list-item"><img class="heigtened_rail"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/heightened-railings.png">
<span>HEIGHTENED RAILINGS</span>
</li>
</div>
<div class="col-sm-6">
<li class="list-item"><img class="window_opening"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/windows-opening.png">
<span>RESTRICTED WINDOW OPENING SPACE</span>
</li>
<li class="list-item"><img class="fire_doors"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/fire-dors.png">
<span>FIRE RATED DOORS</span>
</li>
<li class="list-item"><img class="fire_access"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/fire-access.png">
<span>FIRE RATED ACCESS CONTROL PANELS</span>
</li>
<li class="list-item"><img class="fire_furniture"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/fire-furniitiure.png">
<span>FIRE RATED FURNITURE</span></li>
<li class="list-item"><img class="wifi"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/wifi.png">
<span>SECURE ISOLATED NETWORKS FOR WI-FI AND CCTV</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane container fade" id="comfortandconvenience">
<div class="row">
<div class="content-info col col-sm-6 no-l-padding">
<h3 class="red-title">COMFORT AND CONVENIENCE</h3>
<div class="container">
<div class="row">
<div class="col-sm-6">
<ul>
<li class="list-item"><img class="male_female"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/male_female.png">
<span>DEDICATED BLOCKS FOR MALE AND FEMALE RESIDENTS</span>
</li>
<li class="list-item"><img class="sound"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/sound.png">
<span>NOISE REDUCING WALLS AND DOORS (STC RATED)</span>
</li>
<li class="list-item"><img class="room"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/room.png">
<span>DEDICATED ACCESS POINTS FOR EACH ROOM</span>
</li>
<li class="list-item"><img class="internet"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/internet.png">
<span>HIGH SPEED INTERNET</span>
<li class="list-item"><img class="sweeper"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/sweeper.png">
<span>FULL-TIME SANITARY AND HOUSEKEEPING SERVICES</span></li>
</div>
<div class="col-sm-6">
</li>
<li class="list-item"><img class="digital_notice"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/digital_notice.png">
<span>DIGITAL NOTICE BOARDS ACROSS THE PROPERTY</span>
</li>
<li class="list-item"><img class="residence"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/residence.png">
<span>ON-SITE
RESIDENT SUPPORT – COMMUNITY MANAGEMENT</span>
</li>
<li class="list-item"><img class="water_proof"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/waterproof.png">
<span>WATERPROOF, ANTIFUNGAL AND ANTIBACTERIAL COMFORT SPRING MATTRESSES</span>
</li>
<li class="list-item"><img class="myriad_app"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/myriad_app.png">
<span>THE MYRIAD APP – TO CENTRALISE ADMINISTRATION AND SERVICES SUCH AS BOOKINGS,
PAYMENTS AND NOTICES</span>
</li>
<li class="list-item"><img class="phone"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/phone.png">
<span>IN-ROOM PHONES</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane container fade" id="environmental">
<div class="row">
<div class="content-info col col-sm-6 no-l-padding">
<h3 class="red-title">ENVIRONMENTAL</h3>
<div class="container">
<div class="row">
<div class="col-sm-6">
<ul>
<li class="list-item"><img class="heat"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/heat.png">
<span>UV RATED WALLS – HEAT TRANSMISSION REDUCTION</span>
</li>
<li class="list-item"><img class="air_window"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/air_window.png">
<span>DOUBLE GLAZED WINDOWS – COOL AIR CONTAINMENT</span>
</li>
<li class="list-item"><img class="low_energy"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/low_energy.png">
<span>LOW ENERGY CONSUMING HEAT PUMPS</span></li>
</div>
<div class="col-sm-6">
<li class="list-item"><img class="solar_panel"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/solar_panel.png">
<span>SOLAR PANELS SPACE</span>
</li>
<li class="list-item"><img class="sensor"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/sensor.png">
<span>OCCUPANCY SENSORS TO CONTROL LIGHTING AND AC – BOTH IN - ROOM AND THROUGHOUT
COMMON AREAS</span>
</li>
<li class="list-item"><img class="shower"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/shower.png">
<span>WATER CONSERVING SHOWERHEADS</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- Tab end row -->
</div>
CSS
.list-item {
margin-bottom: 20px;
}
.list-item img {
margin-right: 10px;
}
li.list-item {
display: flex;
margin-bottom: 25px;
align-items: center;
}
li img {
margin-right: 21px;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
How can i correct the images in Firefox?

Answer 1

You can use css grid for this.
li.list-item {
display: grid;
align-items: center;
grid-template-columns: min-content 1fr;
}
demo