CSS, маржа от левого

Question

не понимаю, от почему у меня есть запас слева:

CSS:

html, body { 
    font-family:Myriad Pro, sans-serif; 
    font-size:18px; 
    color:#000; 
    margin:0px; 
    padding:0px; 
    background: url('./images/background.png'); 
} 

#container { 
    width:890px; 
    height:530px; 
    margin:36px auto; 
} 

#userList { 
    width:228px; 
    height:355px; 
    float:right; 
    border:1px solid #cccccc; 
} 

.users li { 
    list-style-type:none; 
    background-color: #f2f2f2; 
    width:100%; 
    height:50px; 
    border-bottom: 1px solid #cccccc; 
} 

HTML:

<div id="userList"><ul class="users"><li><img src="./pic/none.png">Piet van Meerdijk</li><li><img src="./pic/none.png">Henk v/d Wal</li></ul></div> 

Когда я положил margin-left: -40px; в коде CSS элемент li теперь будет слева, но тогда у меня есть поле справа. Зачем?

JSfiddle: http://jsfiddle.net/8Cwcy/

Answer 1

<ul> тег имеет автоматический padding из 40px так что вам нужно будет изменить, что 0px:

ul { 
    padding: 0px; 
} 

Это должно работать во всех браузерах.

Fiddle: http://jsfiddle.net/8Cwcy/3/

Answer 2

По умолчанию много HTML элементов имеют свои собственные правила CSS во многих браузерах, и <ul> тег имеет отступы по умолчанию. Вы должны установить отступы: 0px де <ul> тег:

ul{ 
padding:0px; 
} 

http://jsfiddle.net/8Cwcy/1/

Если вы хотите узнать больше о правилах сброса CSS следовать this ссылке.