Remove indentation from an unordered HTML list

Question

div.content that is containing ul.searchlist with two lis (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

Answer 1

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

Answer 2

I think you should reset the default style sheet before another code. It is the best practice. For example below:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Answer 3

You are looking for list-style-type: not list-style: and then you need to set it's margin and padding to 0, or w/e

.content .searchlist {
    float: left;
    width: 700px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background: red;
}

JSFiddle Example

Answer 4

opera next, chrome, safari, and webkit all appear to be adding 40px of padding on the left:

Source:

ul, menu, dir {
  display: block;
  list-style-type: disc;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;
}

Fix:

#body-content > div > ul {padding-left:0;}

Answer 5

Try this:

.content .searchList {
   padding-left: 0px;
}

ul elements start with a bit of padding by default.

Answer 6

Set padding to 0 :

.content .searchlist {
   background: none repeat scroll 0 0 #FF0000;
   float: left;
   list-style: none outside none;
   margin: 15px 0 0;
   width: 700px;
   padding: 0;
}