To remove unwanted space in front of li elements, you need give value to padding property.
Let me illustrate with an example.
HTML
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
CSS
html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { padding: 0; margin: 0; } ul { width: 260px; margin: 250px auto; border: 2px solid #000; } li { display: inline-block; padding: 15px; color: #ddd; background-color: #FC255A; border: 1px solid #000; cursor: pointer; }
This gives us.
I have added border to ul element to highlight that li elements are pushed to the right.
To move li elements to the left side of ul element, you can add padding: 0 property to ul element.
ul { width: 260px; margin: 250px auto; border: 2px solid #000; padding: 0; }
Or you can use universal selector to set padding to zero.
* { padding: 0; }
This will give same result but remember universal selector (*) selects all elements in HTML. Therefore, all elements padding will be zero as well, not just ul element.