Sorry for my silly question as I am new to web dev.
I got a wrapper of 880px and inside that is the code below. i am trying to get all li elements equally spread horizontally within 880px and have everything inside li element center aligned. I try to avoid using margin-right to spread them, as the last li supposed to perfectly aligned to the right. What would be the best css tricks to achieve this. Thanks a ton in advance!
<div id="services">
<ul>
<li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title1</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li>
<li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title2</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li>
<li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title3</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li>
<li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title4</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li>
<li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title5</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li>
<li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title6</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li>
</ul>
</div>
Add display: inline block to the li's and text-align: center; to center them.
Add width to each li element so they spread.
Add font-size:0 to the wrapper so the spaces in the HTML do not take up any space.
See full solution: http://codepen.io/shippin/pen/KWQgoJ