Increase font-size with CSS creates unwanted indent

Question

This one has me stumped.

I have plain text, which is generated by Ajax. Then using CSS, specifically to the uniquely tagged class I want to increase the font size.

Here is the line in my CSS

#text_li{font-weight:bold;font-size:large;}

The result is large text but it then indents the text. Using firebug, adding and removing this parameter, both reduces the font size and removes the indent.

How can I increase the text size without adding an indent?

Edit: I have tried em and pixels, also tested this across Chrome and Firefox.

Edit2: This is CSS specifically for a Wordpress Widget. When I use jsfiddle I can't replicate the problem. So I'm looking in to whether my main theme CSS is somehow interfering.

Edit3: I replicated the issue when I included my Wordpress theme CSS in the markup. So I assume there is a conflict with the two CSS files I'm using. Here is the jsfiddle.

Answer 1

Add this classs

.samsonginfo_widget_info
{
   margin-left:0;
}

FIDDLE

Answer 2

What about addding margin and padding as zero?

#text_li{
    font-weight:bold;
    font-size:large;
    margin:0;
    padding:0;
}

If this doesn't work, please post a jsfiddle.

Answer 3

You could just play with the text indent of the element:

text-indent: -0.05em;

I tried with this value and works good to me.