<li> element alignment - reduce space on left side of bullet

Question

I am having problem in aligning the <li> element on the left side.

In the image given below, you can see that there is space on the left side of every bullet. I want to delete that space so that both Imported & 100% Genuine bullets are directly below green tick mark.

Here's the code I am using.

<table border="1">
    <tr>
        <td><ul style="margin:0;"><li>Imported</li></ul></td>
        <td><ul style="margin:0;"><li>Authentic & Licensed</li></ul></td>
    </tr>
    <tr>
        <td><ul style="margin:0;"><li>100% Genuine</li></ul></td>
        <td><ul style="margin:0;"><li>200 GSM Paper Depth</li></ul></td>
    </tr>
</table>

Answer 1

Change the padding-left attribute of the ul.

ul {
  padding-left: 20px;
}

http://jsbin.com/upehik/1/

Although I have to wonder why you're using lists if you only have one item per list?

Answer 2

Another option... Most web browsers by default have the bullets displayed outside of the content flow. You can change this by changing the list-style-position to inside. If you notice in the examples below, the bullets are shown in JSFiddle when they are inside, but not outside. The only other way to get the bullets to show when they are outside, is to set the padding-left for the ul element (which is in this example).

Example with bullets inside

Example with bullets outside