I need help with problematic CSS code, and posible Twine 2 harlowe bug. [SOLVED]

Hi!,

I have a CSS styling that works as intended when I hit the Play button in Twine 2 online editor, but when I publish the game, the CSS code just don't work.

What I'm trying to do is a responsive design that plays well on mobile. So when the size of the windows is smaller than 480px, the width is 100% (no margin for mobile precious reading space) and a fixed font-size.

@media (max-width: 479px) {
	tw-story {
    	font-size: 17px;
    	width: 100%;
	}
	tw-sidebar {
		display:none;
	}
}

This code is the same that Secret Agent Cinders uses, but where it works for her, it didn't work for me:

Probably something is wrong with my overall CSS code and I need help, but I think this shows a new bug for Twine 2:

as I said, when you test a game inside the editor the result is different from the finale published story.

I've attached an example, if you load it up on your twine 2 editor, you can test the thing and see that code works. But if you publish the game, the html result will not work properly when the size is resized or it is played on mobile.

https://dl.dropboxusercontent.com/u/35915748/CSS%20style%20error.html

Any idea of what I'm doing wrong? The differences in behaviour proves a bug in Twine 2?

Regards,

Ruber Eaglenest.