How to clear css rules inside specific div for external js embedded content. I mean make it behave as there was no previous css rules...

How to clear css rules inside specific div for external js embedded
content. I mean make it behave as there was no previous css rules...

I want to embed zumi.pl map on my website. Their map is loaded via js to
div with specific id and is dependent on external css. However my css for
formating div inside div#content interferes with embedded map screwing it
all up. I tried to enclose it in another div with contextual css reset but
it's still displays wrong. Only way to make it display (almost) properly
is to uncheck all my css rules for that div in firefox inspector but I
can't figure it out how to achieve the same effect on page. for clarity
this is sample copy&paste code from their generator:
<div id="zumiMap" class="zumi_creator" style="width:300px;
height:300px;"></div>
<script src="http://api.zumi.pl/maps/api" type="text/javascript"
></script><script type="text/javascript">(function(){var marker,map=new
zumi.maps.Map("zumiMap", {"apiKey":
"E48EF8E55A0B3BEAE0434628AE0A1EEA"});map.afterLoad(function()
{document.getElementById("zumiMap").className += "
zumi_creator";map.addMarker({lat: 52.214679,lng: 21.021101},{letter: "A",
type: "main"});map.setCenter({lng: 21.021101,lat: 52.214679},
7);});})();</script>
and here is my css that's to blame:
#content div {
display: inline;
float: left;
margin: 0px 0.833333%;
padding-left: 10px;
}
How to isolate html fragment so it behaves as there was no previous css
rules present? But without using Iframe.