Text formatting off in WYSIWYG editor but correct when previewed.

[slickyv]

When the editor opens a snippet, the text in editor box is not centered as it should be but it is actually correct because when preview is hit it shows correctly.  Is there something wrong with my code or where I'm putting snippet that is causing this?  Pics attached. The main issue is that the wysiwyg editor shows text formatted to the left when it's supposed to be centered.  even though it previews correct, this could be confusing when a user opens the snippet and it "appears" off. Thanks in advance!


Here's my snippet code:

<!-- start content -->
   <div id="content">
     <div class="post" id="line1">

       <div style="text-align: center"><img src="../../images/p28smallbanner.jpg" width="770" height="75" alt="Pflueger 28 Waipahu Auto Dealer" /><br />
         <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','../../images/home2.png',1)"><img src="../../images/home.png" alt="Pflueger 28 Waipahu Automobiles Homepage" width="54" height="40" border="0" id="home" /></a><a href="pflueger28ads.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('adbutton','','../../images/adspecialsbutton2.png',1)"> <img src="../../images/adspecialsbutton1.png" alt="Pflueger 28 Auto Specials" width="214" height="40" border="0" id="adbutton" /></a> <a href="pflueger28inventory.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('inventorybutton','','../../images/inventorybutton2.png',1)"><img src="../../images/inventorybutton1.png" alt="Pflueger 28 Auto Inventory" width="214" height="40" border="0" id="inventorybutton" /> </a><a href="/preowned/pflueger28/pfluegerdirections.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('directionsbutton','','/images/directionsbutton2.png',1)"><img src="../../images/directionsbutton1.png" alt="Pflueger 28 Waipahu Directions" width="214" height="40" border="0" id="directionsbutton" /></a>  <a href="tel://18086807700"><img src="../../images/call2.png" alt="Call Pflueger 28 Waipahu" width="54" height="40" border="0" /></a><br />
         <!-- #beginSnippet name="P28 Welcome" users='pflueger28' width="100%" height="350" -->
          <div class="holder">
  <div class="top">
<h3>Welcome to Pflueger 28 Waipahu</h3>

 </div>
  <p>

  <p>
  <p>
  <p>
  <p>
  <p>
  <p>   
  <p>
  <p>
  <p>       
  <p>

  <p>
<p>Under Construction
  <p>
  <p>
  <p>
  <p> 
  <p>   
  <p>
  <p>
  <p>
  <p>

  <p>
  <p>
  <p>
  <p>
  <p>
  <p>
  <p>
  <p>                           
 
<!-- #EndSnippet --> </p>

<div class="bottom">
  <! end bottom -->
  </div></div></div>

[admin]

The problem is that the centering is most likely done by some CSS that the editor can't "see" as part of the Snippet being loaded into the editor.

Snippetmaster tries to find any associated CSS for the webpage being edited... but it is not perfect and maybe it is missing something.

In what div does the centering occur?