I can't remove the margin with <li> [duplicate]

Question

Do you know why I can't remove the margin from my <li> elements? The browser always adds the specific margin for my list, even when I write the code a specific margin. Here is the CSS and HTML code:

#NavLeftList {
    height: 57 % ;
    width: 15 % ;
    position: absolute;
    top: 23 % ;
    border-style: none;
    background: url(images / heaven.jpg);
    margin: 0px
}

#NavLeftList ul {
    margin-left: 11 % ;
}

#NavLeftList ul li {
    text-align: center;
    width: 170px;
    list-style-type: none;
    text-decoration: none;
    margin: 10px 0px 0px 0px;
    padding: 1px;
}

#NavLeftList li a {
    height: 35px;
    padding: 10px 0px 0px 0px;
    text-decoration: none;
    color: #fff;
    background: url(images / tabright.gif);
    display: block
}

#NavLeftList li a span {
    padding: 0px
}

#NavLeftList li a: hover {
    color: #7EC0EE;
}

I haven't pasted the HTML code here since it was appearing strangely.

Answer 1

What you’re seeing isn’t a margin on the lis, it’s padding on the ul.

Zero out the ul’s padding.

Answer 2

try list-style-position:inside; on the li. It's probably leaving space that would be filled by the bullet even though you've set list-style-type:none;