how to overwrite/edit user agent stylesheet - css

Question

please give a look to my http://jesica89.blogspot.com there is a problem that post description is coming after thumbnail , i know this can be solved by setting , i find a solution to it by firebug ::
p:{display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
please someone tell me how to edit this because i can't find this in my source code , i tried to use this div[ ] to override inline stylesheet but noting happened
here goes the post body html code
<!-- begin blog item -->
<div class='postBox'>
<h1><b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if></h1>
<div class='entry'>
<div class='clear'/>
<p><b:if cond='data:blog.pageType == "static_page"'><br/>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if></p>
</div>
<div class='clear'/>
</div>
<!-- end blog item -->
</b:includable>

Answer 1

You have
<div class="entry">
in which you have
<div id="summary2601058450852975397">
in which you have
<p><img width="230" height="180" src="http://1.bp.blogspot.com/-edk8FaVPqKs/Tg2PwaOkfdI/AAAAAAAAAF8/n0BE2A5VPBY/s1600/love-relationship.jpg"/><p>
followed by
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae justo tellus. Suspendisse vel lobortis orci. Donec sit amet purus tincidunt felis semper auctor at in libero. Nunc vel nisi accumsan metus volutpat faucibus. Maecenas sit amet nulla<p>
This is the order of your HTML so it will display in that order. If you want the last paragrpah to show first, just change you HTML order.