对齐问题嵌套的包含有不同字体大小的有序列表

Question

im trying to create list in html/css like below

1. Heading
1. content one
2. content two
3. content three

2. Heading
1. content one
2. content two
3. content three

and so on..

the font size of the heading and content (including number) are different

my problem is that i can't get the nested child list to align with the parent list. it works when the fond-sizes are the same, but when i change it, the alignment changes as well.

anyone got any ideas on how i can best achieve this?

this is the html css i have so far

<style>
 ol {
    list-style: decimal;
    margin: 30px 0 0 30px; 
}
ol li {
    margin-left: 20px;
    font-size: 20px; 
}
 ol li h2 {
    font-weight: bold;
    font-size: 20px; 
}
ol li ol {
    margin: 0 0 0 0; 
}
ol li ol li {
    margin: 0 0 0 0;    
    font-size: 15px; 
}
ol li ol li p{
    font-size: 15px;
}
 </style>

<ol>        
    <li>
        <h2>Heading 1</h2>          
        <ol>
            <li>
                <p>content 1</p>
            </li>
            <li>
                <p>content 2</p>
            </li>
        </ol>
    </li>

    <li>
        <h2>Heading 2</h2>          
        <ol>
            <li>
                <p>content 1</p>
            </li>
            <li>
                <p>content 2</p>
            </li>
        </ol>
    </li>
</ol>

Answer 1

Just alter the margin-left or padding-left of ol li ol . Try different values until you get the desired result.

http://jsfiddle.net/LyrsY/ (However, jsFiddle uses a CSS reset that may give a different appearance than your page.)

Answer 2

Just add this code:

ol {
    margin: 0px;
    padding: 0px;   
}

Answer 3

As per i understand that's you want . Check this http://jsfiddle.net/ZHLKy/

 ol {
    list-style: decimal inside;
}

UPDATED

give margin to ol li ol & margin-left to your P like this:

ol li ol {
    margin: 0 0 0 1px;
}

ol li ol li p{
    font-size: 15px;
    display:inline;
    margin-left: 3px;
}

Check this http://jsfiddle.net/ZHLKy/2/