Содержимое переполняется из области содержимого

Question

У меня есть demo. Почему элементы списка переполняются из области белого содержимого и как я могу это исправить?

body { 
    line-height: 1; 
    background:#7D93BD; 
    font-size: 22px; 
} 
#content { 
    width:80%; 
    height:auto; 
    margin-left:auto; 
    margin-right:auto; 
    padding: 10px 20px 30px 20px; 
    background-color:#F8F8F8; 
    color: #333333; 
    font-family: Helvetica, Arial, sans-serif; 
} 
    #profileInfo { 
    position: relative; 
    top: 100px; 
} 
#profileInfo li { 
    list-style-type: none; 
    line-height: 1.4; 
} 
#profile_info_title { 
    font-weight: bold; 
} 

Answer 1

Если вам нужно #profileInfo быть толкнул вниз 100px, а затем использовать margin-top вместо top:

#profileInfo { 
    margin-top: 100px; 
    position: relative; 
} 

Answer 2

Вам нужно удалить сверху: 100px из #profileInfo ul - это толкает этот контент на 100 пикселей.

Answer 3

http://jsfiddle.net/AhSzg/2/

Удалить position:relative из #profileInfo

использовать только postion, если вам это нужно действовать по-другому, что по умолчанию. Или удалить top:100px