HTML CSS div inside div with auto margin are off-center?

Question

I have a divider that is centered in the page using margin:auto . Inside I have two more dividers (can't be combined, must be a divider nested in a divider) when I try to center something inside of this it does not center it in the center of the page. I'm assuming it has to do with the padding-left and padding-right that I've added... Any insight?

Here's my code:

<center>
    <div style="margin:auto; width:80%;">
        <div style="width:50%; padding-left:20%; padding-right:20%;">
            <div style="width:inherit; position:absolute; bottom:0%;">
                <hr />
                test
                <hr />
                <br><br><br>
            </div>
        </div>
    </div>
</center>

Answer 1

Just remove the center tag:

<div style="margin:auto; width:80%;">
    <div style="width:50%; padding-left:20%; padding-right:20%;">
        <div style="width:inherit; position:absolute; bottom:0%;">
            <hr />
            test
            <hr />
            <br><br><br>
        </div>
    </div>
</div>

Check it out here: http://jsfiddle.net/V8qMm/