Embed external html effects display

I am trying to embed an exter html object. For some reason the CSS is causing my lectora content to not display correctly. The external html displays fine but everything else on my page is scrambled. I have tried commenting out the CSS and it the page layout returns to normal. I know I can (but shouldnt style the sheet using html) but would rather not do it that way if possible. The css I am using is:

I have tried having only the opening and closing tag for style with no content inbetween and still the problem exists, so it seems as though its the style element that is the problem.