CSS drop shadow effect

[teedoff]

Ok I have been messing with a drop shadow effect for about an hour or so and have it working great! One thing is, my page content is not perfectly centered anymore. Not sure if this would be a real problem, as the page seems to render well, but I couldn't figure out how to get it back to center.

I wrapped my original wrapper div in two more divs. The outer one I set margins to auto and that centered, but the second div, .back, I had to set some margins as well as my original div, #wrapper, I gave some negative margins to offset so the shadow effect would display properly.

Will this pose a problem that anyone may have encountered before? Also, there should be no reason why the page shouldn't be centered, and if anyone could offer some advice on how to get it back to center, I would appreciae it. Here is the html and CSS in question:

<div class="center">
  <div class="back">
    <div id="wrapper">
      <cfinclude template="../header.cfm">
      <div id="main">
        <div id="sidebar">
          <cfinclude template="../sidebar.cfm">
        </div>
        <div id="content">
          <h2>Find Your Replacement Bulb</h2>
          <p>We are a commercial and residential resource for light bulbs from quality manufacturers including Philips Lighting, Osram, Eiko, Halco, Thorn, Sylvania, Hakari, Higuchi, Kandolite and General Electric. We stock replacement lighting and lamps including incandescent bulbs, halogen light bulbs, PAR halogen and incandescent lamps, MR8 lamps, MR11 lamps, MR13 lamps, MR14 lamps, MR16 lamps, compact fluorescent bulbs, metal halide bulbs, high intensity discharge bulbs (H.I.D.), full spectrum light bulbs, ANSI code bulbs, projector bulbs, projection bulbs, medical bulbs, dental bulbs, surgical bulbs,   automotive bulbs, auto bulbs. We offer a lighting cross reference for GE light bulbs, GE bulbs, Osram/Sylvania light bulbs, Osram/Sylvania bulbs, Philips light bulbs and Philips bulbs. We carry exit sign replacement bulbs, and emergency lighting replacement lamps.</p>
          <p>Our bulbs and replacement lights are divided into catagories. Select a catagory or use the Advanced Search Feature below to find a specific bulb or product.</p>
          <p align="center"><a href="../photoLighting.cfm">Photo &amp; AV Lamps</a> &bull; <a href="../studioLighting.cfm">Stage Studio/Theatre</a> &bull; <a href="../generalLighting.cfm">General Lighting</a><br />
            <a href="../sealedLighting.cfm">Sealed Beams</a> &bull; <a href="../dentalLighting.cfm">Dental Lamps</a> &bull; <a href="../medicalLighting.cfm">Medical Lamps</a> &bull; <a href="../fluorescentLighting.cfm">Fluorescent Lamps</a><br />
            <a href="../lcdLighting.cfm">LCD and TV Lamps</a> &bull; <a href="../bargainLighting.cfm">Bargain Priced Lamps</a> &bull; <a href="#">Hard To Find Lamps</a><br />
            <a href="#">Lamp Sockets</a> &bull; <a href="#">Batteries</a></p>
          <form action="../search.cfm" method="post" name="search">
            <p align="center"><strong>Advanced Search</strong>
              <input name="Search" type="submit" value="Search" />
            </p>
          </form>
        </div>
      </div>
      <cfinclude template="../footer.cfm">
    </div>
  </div>
</div>

CSS

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	margin: 0px;
	padding: 0px;
	background-color: #999;
}
.center {
	width:1000px;
	margin: 10px auto 0px auto;
}
.back {
	background: #666;
	width: 1000px;
	margin: 3em 0 3em 2em;
	padding: 1.2em;
}

#wrapper {
	padding: 0px;
	margin: -3em 0 0 -3em;
	border: thin solid #ccc;
	background-color: #FFF;
}

[kidwon]

.back {
background: #666;
width: 1000px;
margin: 3em 0 3em 2em;
padding: 1.2em;
}

In this configuration that one ruins your centering, set it to zero and see it yourself.

[teedoff]

Yes you're right! Thanks, I knew it was something simple I was just not seeing! Thanks again.