Remove indentation from an unordered HTML list
alignment, css, html, html-lists, spacing
Solution
Removing default `padding-left` (this indention ensures that the markers won't be pushed outside the list ) from `ul` and custom `padding` from `li` should work:
.content ul.searchlist { padding-left : 0; }
.content ul.searchlist li { padding : 10px 0; }
JSFiddle
Problem
`div.content` that is containing `ul.searchlist` with two `li`s (areas with the white background) is not aligning at the left completely as it has some extra spacing (area with the red background) and I don't know what is causing it to appear and how to remove it. Illustration : HTML : ``` <div id="body-content"> <h1>Title of</h1> <div class="content"> <p style="margin:0;">Subtitle</p> <ul class="searchlist"> <li> <img src="" title="result" width="110px"/> <a href="#">This is a post for testing CSS</a> </li> <li> <img src="" title="result" width="110px"/> <a href="#">This is a post for testing CSS</a> </li> </ul> </div> </div> ``` CSS : ``` #body-content{ float:left; width:700px;background:yellow; } .content .searchlist{ float:left; width:700px; list-style:none; margin:15px 0 0 0; background:red; } .content .searchlist li{ padding:10px; float:left; width:688px; background:#fcfcfc; margin-bottom:6px; } .content .searchlist li img{ float:left; margin-right:10px; } .content .searchlist li a{ font:bold 18px Arial, Helvetica, sans-serif; color:#666; } ``` JSFiddle