How to make a bullet list align with text in css?

Question

The image demonstrates the problem. I want the bullet list to be aligned with the text, not indented.

This must be modified in css i guess, because source is:

            <p>This is a test :)</p>  <ul>  <li>Test1</li>  <li>Test2</li>  <li>Test3</li>  <li>Test4</li>  </ul>  <p><strong>Bla bla</strong></p>  <p><strong>Dette er en test</strong></p>  <p><strong><span class="Apple-style-span" style="font-weight: normal;"><strong>Dette er en test</strong></span></strong></p>  <p><strong>Dette er en test</strong></p>  <p><strong><span class="Apple-style-span" style="font-weight: normal;"><strong>Dette er en test</strong></span></strong></p>         </div>  

So how can I remove the padding/margin from left in this bull list? I tried margin: 0; padding: 0; did not work out

Answer 1

Apply padding-left: 0 and change the list style position to inside:

ul  {   padding-left: 0; } ul li {    list-style-position: inside; } 

Example link http://jsfiddle.net/vF5HF/

Answer 2

ul {     margin-left: 0;     padding-left: 0; } li {     margin-left: 1em; }