The article How to change bullets on list items with CSS describes possible values you can set when you want to manage style of bullets in your Web project. When you want to remove the indentation entirely so that the list will align left with any other content, you can use the setting from the next test file:
Files test.css
ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
You can test these setting with the next test file:
File test.html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>How to remove the indented left margin from a list with CSS</title>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”test.css” />
</head>
<body>
<ul>
<li>list item one</li>
<li>list item two</li>
<li>list item three</li>
<li>list item four</li>
<li>list item five</li>
</ul>
</body>
</html>
The next picture shows the result:
Removing of the indented left margin from a list with CSS