title: Bullets in unordered list not contained within the block?
body: <p>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?</p>
  
  <p>In this fiddle, my unordered list has <code>padding-left:0</code> and you can see the bullets are pushing out of their container. <a href="http://jsfiddle.net/E4WWu/1/" rel="noreferrer">http://jsfiddle.net/E4WWu/1/</a></p>
  
  <p>I had to give the unordered list some padding to "fix" the problem as seen here: <a href="http://jsfiddle.net/E4WWu/" rel="noreferrer">http://jsfiddle.net/E4WWu/</a></p>
  
  <p>My question is this:  Why are the bullet points not contained within the <code>&lt;ul&gt;</code> element?  Is it something with my page in specific or is this something in HTML/CSS that I am missing?</p>
  
  <p>Thanks in advance.</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div class="center-midright-container"&gt;
      &lt;div class="infoBox"&gt;&lt;span class="filler"&gt;Content Goes Here ...&lt;/span&gt;&lt;/div&gt;
      &lt;div class="innerBottom"&gt;
          &lt;h3 class="instructHeader"&gt;Instructions&lt;br/&gt;&lt;/h3&gt;
          &lt;ul class="instructText"&gt;
              &lt;li&gt;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.&lt;/li&gt;
              &lt;li&gt;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.&lt;/li&gt;
              &lt;li&gt;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.&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>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;
  }
  </code></pre>