Hello, I am having a real problem with my template at www.blogger.com ; when I preview the template it looks great but once i save it and publish it, the scrollbar doesn't appear lilac and the left margins on my posts are too close to the left. I really don't know how to arrange this, I am new to html and of course a newbie to css. So here I include the code and if someone can give me some help i will be really grateful.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><meta name="author" content="SOUL" />
<meta name="dc.language" content="en" />
<meta name="copyright" content="This work is licensed under a
Creative Commons License. " />
<meta name="description" content="Looking back to the times of cotton fields, coffee engines... and chivalry" />
<meta name="keywords" content="SLAVE,SLAVERY,DOMINANT,DOMINANCE,EROTICA,INTERRACIAL" />




<title><$BlogPageTitle$></title>

<$BlogMetaData$>

<style type="text/css">
/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
----------------------------------------------- */


body {scrollbar-base-color: #cc99ff;
background-color: #f5ecff;}

blockquote, p, h1, h3, .blogpost {font-family: "Trebuchet MS", arial, sans-serif;
font-size: normal; color: black;}

.outerborder {background-color: #f5ecff;
width: 285px;}
.menuheader {font-family: "Harrington", "Trebuchet MS", arial;
background-color: #e7d1fd;
color: black;
font-size: 18px;
font-weight: bold;
text-align: center;
border-color: #7d00be;
border-width: 1px;
border-style: dashed;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 3px;}

.menutext {background-color: #f5ecff;
font-size: 16px;
padding-top: 5px;
padding-left: 10px;}

h2 {font-family: "Harrington","Trebuchet MS", arial;}


.dateheader {background-color: #e7d1fd;
color: black;
text-align: left;
border-bottom: 1px dashed #7d00be;
border-top: 1px solid #7d00be;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 3px;}
.postinfo {font-style: italic;
font-weight: bold;
color: black;}

.contentcell {background-color: white;
width: 100%;
border-color: #7d00be;
border-style: solid;
border-right-width: 1px;
border-left-width: 1px;
border-bottom-width: 1px;
border-top-width: 0px;}


a:link {color: #7d00be;
text-decoration: none;}

a:visited {color: mediumpurple;
text-decoration: none;}

a:active {color: #cc66ff;
text-decoration: none;}



a:hover {background-color: #cc99ff;
color: black;
text-decoration: none;}
a img {
border-width:0;
}
.blogpost {margin-left: 15px;
margin-right: 10px;}


blockquote {padding: 5px;
font-size: smaller;
border-color: #cc99ff;
border-width: 1px;
border-style: dashed;}




.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #fff;
padding-bottom:1.5em;
}
.comment-link {
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
.comment-link {
margin-left:.6em;
}
.post a {
font-weight:bold;
}
#comments h4 {
margin:1em 0;
font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#774;
}
#comments-block dt {
margin:.5em 0;
}
#comments-block dd {
margin:.25em 0 0;
}
#comments-block dd.comment-timestamp {
margin:-.25em 0 2em;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
</style>
</head>

<body>
<!-- You may add banner here. -->
<center>
<img border="0" src="http://www.passionatelove.net/title.JPG" width="385" height="300"><p id="description">
<font face="Antigoni"><$BlogDescription$></font></p>
<p id="description">&nbsp;<!-- Start FastOnlineUsers.com -->
<font face="Banjoman Open Bold">
<a href="http://www.fastonlineusers.com"><script src=http://fastonlineusers.com/online.php?d=www.unmerciful-tara.blogspot.com></script> online</a></font><!-- End FastOnlineUsers.com -->
</p>
<p>&nbsp;</p>
</center>
<table border="0" cellpadding="5" cellspacing="0" width="100%">
<tr>

<td valign="top" width="100%">
<!-- You may move banner here if needed. -->
<div class="contentcell">
<Blogger>
<BlogDateHeader><h2 class="dateheader"><font face="AucoinLight"><$BlogDateHeaderDate$></font></h2></BlogDateHeader>
<!-- Begin .post -->
<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>
<h3 class="post-title" align="center">
<a href="<$BlogItemUrl$>" title="external link">
<BlogItemUrl></BlogItemUrl>
<font size="4" face="AucoinLight"><$BlogItemTitle$> </font>
<BlogItemUrl></BlogItemUrl>
</a>
</h3>
</BlogItemTitle>

<div class="post-body">
<p style="margin-left: 6">
<font face="Georgia" size="3">&nbsp;<$BlogItemBody$> </font>
</p>
</div>

<p class="post-footer">
<em><font face="Book Antiqua">&nbsp;posted by <$BlogItemAuthorNickname$> at
</font> <a href="<$BlogItemPermalinkUrl$>" title="permanent link">
<font face="Book Antiqua"><$BlogItemDateTime$></font></a></em><font face="Book Antiqua">
</font>
<MainOrArchivePage><BlogItemCommentsEnabled>

<a class="comment-link" href="<$BlogItemPermalinkURL$>#comments">
<font face="Book Antiqua"><$BlogItemCommentCount$> comments</font></a><font face="Book Antiqua">
</font>
</BlogItemCommentsEnabled></MainOrArchivePage> <font face="Book Antiqua"><$BlogItemControl$>
</font>
</p>

</div>
<!-- End .post -->



<!-- Begin #comments -->
<ItemPage>
<div id="comments">

<BlogItemCommentsEnabled><a name="comments"></a>
<h4><font size="2" face="Book Antiqua"><$BlogItemCommentCount$> Comments:</font></h4>
<dl id="comments-block">
<BlogItemComments>
<dt class="comment-poster" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
<$BlogCommentAuthor$> said...
</dt>
<dd class="comment-body">

<p><$BlogCommentBody$></p>
</dd>
<dd class="comment-timestamp"><a href="#<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
</dl>
<p class="comment-timestamp">

<$BlogItemCreate$>
</p>
</BlogItemCommentsEnabled>
<p class="comment-timestamp">
<a href="<$BlogURL$>">&lt;&lt; Home</a>
</p>
</div>

</ItemPage>

<!-- End #comments -->

</Blogger>
</div></div>
<!-- End #main -->
<br>
&nbsp;</p>

</td>

<td valign="top" width="300">
<!-- You may add an image here. -->
<div class="outerborder">
<div class="menuheader"><font face="AucoinLight">Soul</font></div>
<p class="menutext">
<$BlogMemberProfile$></p>
<p class="menutext">
<font face="AucoinLight" size="3">&nbsp;The Irreverent 1700's Governor's Wife</font></p>
<ul>
<p style="text-align: center">
<b><font size="2" color="#668844" face="Antigoni Light">*some adult content*</font></b></p>
<p style="text-align: right">
<a href="http://feeds.archive.org/validator/check.cgi?url=http://unmerciful-tara.blogspot.com/atom.xml">
<img src="http://www.passionatelove.net/valid-atom.png" alt="[Valid Atom]" title="Validate my Atom feed" width="88" height="31" /></a></p>
<p style="text-align: right">
<a href="http://www.bloglines.com/sub/http://unmerciful-tara.blogspot.com/">
<img src="http://www.passionatelove.net/sub_modern6.gif" border="0" alt="Subscribe with Bloglines" width="80" height="15" />
</a></p>

<p style="text-align: right"><script src="http://blogsnob.simpleads.net/ad/11824" type="text/javascript">blogsnob. show off your websites. http://blogsnob.simpleads.net</script></p>

</ul>

<div class="menuheader"><font face="AucoinLight">Ledger</font></div>
<p class="menutext">
<script type="text/javascript" src="<$BlogArchiveFileName$>"></script>
<h2 class="sidebar-title" style="text-align: right"><b>
<font size="2" face="Footlight MT Light">Previous Posts</font></b></h2>
<ul id="recently">
<BloggerPreviousItems>
<li>
<p style="text-align: right"><a




ETC. ETC.... (THE PROBLEM SEEMS TO BE ABOVE)



</body>
</html>



THANKS FOR YOUR HELP!