title: margin: 0 auto; not working when linked to external css
body: <p>When I linked to my external style-sheet, it seems my wrapper styles are broken. If I paste the styles into the head on my index.html, it works just fine, but not when linking to a .css. All other css rules work perfectly either way, only the wrapper style appears to break. </p>
  
  <p>The only rule applied to the wrapper is to center it within the browser, so if there is another reasonable way to accomplish this I'm all ears.</p>
  
  <p>the wrapper css:</p>
  
  <pre><code>#wrapper { 
      width: 960px; 
      margin: 0 auto; 
  }
  </code></pre>
  
  <p>and the html (minus content):</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;div id="header"&gt;
          &lt;/div&gt;
          &lt;div id="nav"&gt;
          &lt;/div&gt;
          &lt;div id="content"&gt;
              &lt;div id="cont_left"&gt;
              &lt;/div&gt;
              &lt;div id="cont_right"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="footer"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Any help or advice would be great. </p>
  
  <p>EDIT: here is the full css:</p>
  
  <pre><code>#wrapper {
  width: 960px;
  margin: 0 auto;
  }
  
  #header {
  width: 960px;
  height: 144px;
  background-image: url(../images/header.jpg);
  background-repeat: repeat-x;
  margin-bottom: -14px;
  }
  
  #logo {
  margin-right: 48px;
  margin-top: 33px;
  float: right;
  }
  
  #logo a img {
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  }
  
  #tagline {
  margin-top: 90px;
  margin-left: 48px;
  float: left;
  clear: both;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-style: normal;
  color: #CCC;
  }
  
  #nav {
  width: 960px;
  height: 48px;
  background-image: url(../images/nav_bar.jpg);
  background-repeat: repeat-x;
  }
  
  #nav_bar {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: bold;
  margin-left: -50px;
  padding-top: 14px;
  }
  
  #nav_bar li {
  display: inline;
  padding-left: 58px;
  }
  
  #nav_bar li a {
  text-decoration: none;
  color: #999;
  padding: 4px;
  }
  
  #nav_bar li a:hover {
  color: #fff;
  background-color: #666;
  }
  
  .current {
  color: #CCC;
  }
  
  #content {
  float: left;
  width: 960px;
  background-image: url(../images/content.jpg);
  background-repeat: repeat-x;
  }
  
  #cont_left {
  width: 40%;
  margin: 48px;
  float: left;
  }
  
  #cont_right {
  width: 40%;
  margin: 48px;
  float: right;
  }
  
  #footer {
  clear: both;
  height: 48px;
  width: 960px;
  background-image: url(../images/footer.jpg);
  background-repeat: repeat-x;
  }
  
  #footer_list {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #666;
  font-style: normal;
  text-align: center;
  padding-top: 16px;
  }
  
  #footer_list li {
  display: inline;
  padding: 18px;
  }
  
  #footer_list li a {
  text-decoration: none;
  color: #666;
  padding: 4px;
  }
  
  #footer_list li a:hover {
  color: #000;
  text-decoration: underline;
  }
  
  h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 48px;
  line-height: 20px;
  font-weight: normal;
  margin: 0px;
  padding-top: 0px;
  padding-bottom: 12px;
  }
  
  p {
  font-family:Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 20px;
  }
  
  body {
  background-image: url(../images/background.jpg);
  background-repeat: repeat-x;
  }
  </code></pre>
  
  <p>EDIT TO ADD: Website is not live, therefore I have no link to provide, sorry. Still in early development stages, got stuck on this issue.</p>