Why can't I apply CSS3 Columns to this text?

Question

I'm trying to make my text have two columns on my tumbler blog. I made a class:

<style> 
.2col
{

    width: 800px;
    margin: 0 auto;
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    text-align: justify;
    height: 300px;
}
</style>

This works in a small test I made:

<div class="2col">
    Bunch of text
</div>

You can see it here

But when I try to apply this in my blog to just the text, it doesn't work. If I apply it to the entire blog, it works, but I want to only apply it to some text sections. Within tumblr, I am using:

<div class="2col">
    {Body}
</div>

However it doesn't change the text, which you see here on the main page of my blog (the lorem ipsum text). The {Body} part doesn't seem to have anything that should cause a problem (you can see the CSS and the text in the source for the page. I feel like I am missing some fundamental understanding about CSS classes, because I have not even been successful trying to add something simple to the text, like an underline. I hope someone can point me in the right direction.

For reference, I posted an image to my blog of what I am trying to make, but I don't have enough reputation to add it here.

Answer 1

Try renaming your class - In most languages and naming conventions you shouldn't be starting with an integer. Fairly sure this applies to CSS as well - it is likely that the interpreter is plainly ignoring it.