I have created a basic page with a header, main content, right sidebar and footer. Within the main content I have a few div tags where I have placed blocks of info. I used left margins on the divs to set them where I wanted on the page. The margins show up on my dreamweaver DESIGN view...but not in the web browser previews.
What have I done wrong for the margins to show in my DESIGN view but not actually be applied?

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome to Peck's Family Acupuncture</title>
<link href="thrColFixHdr.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:link {
color: #D2DAA9;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #D2DAA9;
}
a:hover {
text-decoration: none;
color: #D2DAA9;
}
a:active {
text-decoration: none;
color: #D2DAA9;
font-weight: bold;
font-size: 10px;
}
#apDiv1 {
position: absolute;
width: 200px;
height: 176px;
z-index: 1;
left: 7px;
top: 257px;
}
#apDiv2 {
position: absolute;
width: 200px;
height: 115px;
z-index: 1;
}
#apDiv3 {
position: absolute;
width: 207px;
height: 85px;
z-index: 1;
top: 286px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000;
left: 184px;
}
#apDiv4 {
position: absolute;
width: 208px;
height: 325px;
z-index: 2;
left: 518px;
top: 380px;
font-size: 12px;
text-align: justify;
}
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>

<body>

<div class="container">
<div class="header"><!-- end .header -->
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="Pecks_Home.html">HOME</a> </li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a> </li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div class="content"></div>
<div id="apDiv4"><span style="font-weight: bold">Jessica Peck, MSc, MAc, LAc, DipLac. (NCCAOM), </span>is a licensed Acupuncturist and certified practitioner of cupping therapy through the International Cupping Therapy Association. Ms Peck owns Peck’s Family Acupuncture in Waterboro at the Massabesic Regional Medical Building. <br />
<br />
For more information on cupping therapy or acupuncture, please check out our website or email <a href="mailto:jessica@pecksfamilyacupuncture.com" style="color: #A71B22; font-weight: bold;">Jessica Peck</a>.</div>
<div id="apDiv3"><span style="font-weight: bold; color: #A71B22; font-size: 18px;">JESSICA PECK</span><br />
Board Certified, <br />
Licensed Acupuncturist </div>
<div class="sidebar2">
<div class="sidebar2">
<div class="sidebar2">
<div id="apDiv1">
<p><a href="Pecks Images*/HealthQuestionnaire.pdf" target="new">HEALTH <br />
QUESTIONNAIRE</a></p>
<p><a href="










https://clients.mindbodyonline.com/A...studioid=40259
" target="new">SCHEDULE APPOINTMENT</a></p>
<p><a href="https://www.facebook.com/pages/Pecks-Family-Acupuncture/167772536642624" target="new"><img src="Pecks Images*/facebook.png" alt="" width="50" height="50" /></a></p>
</div>
<div class="sidebar2"></div>
<p>&nbsp;</p>
</div>
</div><p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><br />
</p>
<p>&nbsp;</p>
</div>
<p>&nbsp;</p>
<div class="footer">
<p>HOME • ABOUT • SERVICES • CONTACT • <a href="










https://clients.mindbodyonline.com/A...studioid=40259
" target="new">SCHEDULE APPOINTMENT</a><br />
©2013 Peck's Family Acupuncture, 813C Main St., Waterboro, ME 04087<br />
Website design by <a href="http://www.kldesignandmarketing.com" target="new">KL Design &amp; Marketing</a>. Please contact the <a href="mailto:kerry@kldesignandmarketing.com">webmaster</a> with any issues viewing this site. </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<!-- end .container --></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>