CSS: why is list item shown without bullet?

Question

I have a list of items:

<ul>
    <li> item 1 </li>
    <li> item 2 </li>
</ul>

These are shown without the bullet. But why? Below are all the computed styles, copy-pasted from Chrome's Inspect element. What do I need to change? Display:list-item and list-style-type:disc seem to be ok.

(I am injecting html via javascript. That means that I can make my own style classes to override any styles that would otherwise be inherited, but I can't "remove" any styles from the parents.)

-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-size: auto;
color: red;
display: list-item;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 14px;
height: 17px;
list-style-type: disc;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
text-align: left;
width: 1389px;

Answer 1

Try to give additional style that is list-style-position:inside; and check the sample code.

No need to change padding or margin.

Answer 2

They exist, they just are not visible. You broke the left border. Try

padding-left: 20px;

or

margin-left: 20px;