<div class="companies">
<ul class="logos">
<li><img src="images/image1.png" alt="" height="25px" /></li>
<li><img src="images/image2.png" alt="" height="25px" /></li>
<li><img src="images/image3.png" alt="" height="25px" /></li>
<li><img src="images/image4.png" alt="" height="25px" /></li>
<li><img src="images/image5.png" alt="" height="25px" /></li>
</ul>
</div>
/* Logos styling */
.companies {
width:100%;
}
ul.logos {
list-style:none;
margin:0 auto;
}
ul.logos li {
display: inline-block;
padding: 0 1em 0 0;
vertical-align: middle;
}
The unordered list is still aligned to the left instead of centering as intended with margin:0 auto;
I prefer not to set a fixed width, I would like the list to adjust its size based on screen size.