Why do the images with the same CSS property appear different in Chrome and Mozilla? I want them all to float left with equal margins between them, covering the complete area horizontally despite having varying image widths.
I'm unsure why there is a discrepancy between these browsers.
HTML
<div class="bottomLogoWrapper">
<h3>Lor separat existentie</h3>
<div class="logoContainer clearFix">
<div class="bottomLogo lfloat"><a><img src="images/fireFax.png"></a></div>
<div class="bottomLogo lfloat"><a><img src="images/optus.png"></a></div>
<div class="bottomLogo lfloat"><a><img src="images/toyota.png"></a></div>
<div class="bottomLogo lfloat"><a><img src="images/theIconic.png"></a></div>
<div class="bottomLogo lfloat"><a><img src="images/kogan.png"></a></div>
</div>
</div>
CSS
.bottomContent > .bottomLogoWrapper{
width: 100%;
padding: 50px 15px;
border-bottom: 3px solid #e5e5e5;
margin-bottom: 50px;
}
.bottomContent > .bottomLogoWrapper h3{
margin:0 auto 50px;
color: #3f3f40;
}
.bottomContent .logoContainer{
width: 100%;
display: inline-block;
}
.bottomContent .logoContainer .bottomLogo{
margin: 0 5%;
}
.bottomContent .logoContainer .bottomLogo:last-child{
margin: 0px;
}
.bottomContent .logoContainer .bottomLogo a{
cursor: pointer;
}
.bottomContent .logoContainer .bottomLogo img{
width: 70%
}
Chrome
https://i.stack.imgur.com/dWf5f.png
Mozilla