How to remove indentation from an unordered list item?

Set the list style and left padding to nothing.

ul {
    list-style: none;
    padding-left: 0;
}​

ul {
  list-style: none;
  padding-left: 0;
}

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

To maintain the bullets you can replace the list-style: none with list-style-position: inside or the shorthand list-style: inside:

ul {
  list-style-position: inside;
  padding-left: 0;
}

ul {
  list-style-position: inside;
  padding-left: 0;
}

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

My preferred solution to remove <ul> indentation is a simple CSS one-liner:

ul { padding-left: 1.2em; }

<p>A leading line of paragraph text</p>
<ul>
    <li>Bullet points align with paragraph text above.</li>
    <li>Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. </li>
    <li>List item 3</li>
</ul>
<p>A trailing line of paragraph text</p>

This solution is not only lightweight, but has multiple advantages:

• It nicely left-aligns <ul>'s bullet points to surrounding normal paragraph text (= indenting of <ul> removed).
• The text blocks within the <li> elements remain correctly indented if they wrap around into multiple lines.

Legacy info:
For IE versions 8 and below you must use margin-left instead:

    ul { margin-left: 1.2em; }

display:table-row; will also get rid of the indentation but will remove the bullets.

Add this to your CSS:

ul { list-style-position: inside; }

This will place the li elements in the same indent as other paragraphs and text.

Ref: http://www.w3schools.com/cssref/pr_list-style-position.asp

Remove the padding:

padding-left: 0;