Bullets in unordered list not contained within the block?

Question

I'm having issues with my bullets on an unordered list breaking out of their block element. Is this normal, or are bullets not considered part of the document flow?

In this fiddle, my unordered list has padding-left:0 and you can see the bullets are pushing out of their container. http://jsfiddle.net/E4WWu/1/

I had to give the unordered list some padding to "fix" the problem as seen here: http://jsfiddle.net/E4WWu/

My question is this: Why are the bullet points not contained within the <ul> element? Is it something with my page in specific or is this something in HTML/CSS that I am missing?

Thanks in advance.

HTML

<div class="center-midright-container">
    <div class="infoBox"><span class="filler">Content Goes Here ...</span></div>
    <div class="innerBottom">
        <h3 class="instructHeader">Instructions<br/></h3>
        <ul class="instructText">
            <li>This is a list of instructions and this sentence is meant to be an item of the list. Each item can wrap around to the next line if it is long enough.</li>
            <li>This is a list of instructions and this sentence is meant to be an item of the list. Each item can wrap around to the next line if it is long enough.</li>
            <li>This is a list of instructions and this sentence is meant to be an item of the list. Each item can wrap around to the next line if it is long enough.</li>
        </ul>
    </div>
</div>

CSS

h3 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
h3 {
    color:#fff;
}
ul {
    list-style-image:url('http://oi43.tinypic.com/wb8nz9.jpg');
    padding-left:10px
}
h3.instructHeader {
    text-decoration:underline;
    text-align:center;
}
.center-midright-container {
    margin:0 auto;
    width: 700px;
}
.innerBottom {
    width:80%;
    border: 3px #b51700 ridge;
    background-color:#000;
    padding:10px;
    margin:0 auto;
    margin-top:25px;
}
.instructText {
    text-align:left;
    line-height:1.5;
    color:#fff;
}
/* This is actually filled with content in my page.  Here now just for a filler */
.infoBox {
    height:500px;
    background-color:#000;
    text-align:center;
    position:relative;
}
.filler {
    position:relative;
    top:47%;
    color:#fff;
}

Answer 1

Question answered in the comments. Thanks to @Chad and @Mr Lister for their help.

I failed to notice the default properties of the <ul> element in that the bullet points are contained OUTSIDE of the block by default and in the PADDING of the element instead. When I think about it, this makes sense because that would allow the text of each bullet point to line up precisely.

Adding list-style-position: inside; fixed it by placing it inside of the element instead of in the padding.

Thanks!