Why is my list being "overwritten"?

Why is my list being "overwritten"?

In my html page I got a list:
<ul id="notifications" class="notifications">
<li class="Error">Max title length is 50 characters</li>
</ul>
However later elements such as content in div tags are being displayed
behind the list rather than after the list is done. What's the issue here?
EDIT: Here's the CSS of the tags:
ul.notifications li.Error
{
display: block;
color: red;
list-style-image: url('/images/error.png');
height: 20px;
width: 20px;
}