I'm facing a challenge with centering elements that are floated left and have a width of 33.33333% on the page. I want the text inside these elements to remain aligned to the left, but I'm unsure how to go about centering the items:
ul.home-product-list {}
.home-product-list li {
float: left;
width: 33.33333%;
}
<ul class="home-product-list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
Screenshot
https://i.stack.imgur.com/g7rMg.png
Any suggestions on what steps I should take?