@media calls working in Firefox

Question

I'm trying to center a poem, but if the window width gets too small, i.e. landscape -> portrait, I want the poem to (1) left align and (2) word-wrap. Here are the 2 .css files.

First, the default case:

/* css/default.css */

#header, #poemWrapper, #footer {
 text-align: center;
}

#poem {
 width:      28em;
}

Now, here iss the thin version of the .css:

/* css/thinMobile.css */

#header, #poemWrapper, #footer {
 text-align:    left;
}

#poem {
 width:         auto;
 /*
 color:         #00f;     // just for testing
 */
}

It successfully left aligns, but when the window width gets smaller than the width of the poem, there is zero word wrap in Firefox. Word wrap happens in Safari, SeaMonkey, but not in Firefox or Navigator 9. BTW, I know the Browser is accessing the thin version in Safari and SeaMonkey because of my color test -- but not with Firefox and Navigator.

I have read that Firefox does incorporate HTML 4, so does anyone have any ideas.

Here's the link.

Appreciate it.

John Love