This site is overriding my CSS with its own and I cannot get around it! It has style.css with "text-align: center" in the body.

I have <div id="mydiv"> appended to the body and it's normally got "text-align: left". There are <ul>s and <li>s underneath #mydiv and they are inheriting the body's 'center' for some reason. I tried this and it's still not working.

$('#mydiv').children().css('text-align', 'auto');

How the heck do I reclaim my CSS!?

@Grillz, the HTML looks like this:

<div id="mydiv">
<ul class="container">
    <li rel="folder" class="category"><a href="#">category1</a>
        <ul><li rel="file" class="subcategory"><a href="#">subcategory1</a></li></ul>
        <ul><li rel="file" class="subcategory"><a href="#">subcategory2</a></li></ul>
    </li>
    <li rel="folder" class="category"><a href="#">category2</a>
        <ul><li rel="file" class="subcategory"><a href="#">subcategory3</a></li></ul>
        <ul><li rel="file" class="subcategory"><a href="#">subcategory4</a></li></ul>
    </li>
</ul>