title: Margin: 0 auto is not centering my image
body: <p>I'm very new to all of this and am trying to build this website, but the main image on the page is not centering. I've tried all sorts of centering things but they don't work. Also, the width percentage is ignored too. </p>
  
  <p>I've readjusted margin/padding to 0. don't know what it could be.</p>
  
  <p>css for the picture:</p>
  
  <pre><code>#pictures img{
      width:"70%";
      margin: 0 auto;
      padding-bottom: 80px;
      padding-top: 20px;
  </code></pre>
  
  <p>}</p>
  
  <p>and the html div that has to do with it:</p>
  
  <pre><code>&lt;div id="pictures"&gt;
      &lt;img src="img/homepage.png" alt="HomePage"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>FULL HTML</p>
  
  <pre><code>&lt;!DOCTTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
      &lt;title&gt;Jacobs Bookeeping&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"&gt;
  
      &lt;link rel="stylesheet" href="css/style-no-grid.css" type="text/css" media="screen"&gt;
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
      &lt;div class="container clearfix"&gt;
  
      &lt;div id="main"&gt;
  
      &lt;div id="header"&gt;
          &lt;img src="img/logo.png" alt="Jacobs Bookkeeping Logo" width="248"&gt;
          &lt;/div&gt;
  
  
      &lt;div id="twitter"&gt;
          &lt;a href="twitter.com/"&gt;&lt;img src="img/twitter.jpg" alt="Twitter"&gt;&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div id="facebook"&gt;
          &lt;a href="www.facebook.com/"&gt;&lt;img src="img/facebook.jpg" alt="Facebook"&gt;&lt;/a&gt;
      &lt;/div&gt;
  
  
          &lt;ul class="nav"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="last"&gt;&lt;a href="#"&gt;Resources&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
  
          &lt;div id="pictures"&gt;
                      &lt;img src="img/homepage.png" alt="HomePage"&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;div id="copyright"&gt;
                  &lt;p&gt;K. RONI JACOBS, &lt;em&gt;KEEPER OF THE BOOKS&lt;/em&gt; — &lt;a href="jacobsbookkeeping1@gmail.com"&gt;EMAIL JACOBS BOOKKEEPING &lt;/a&gt; — CALL 206.861.5664 — &amp;copy; 2013 JACOBS BOOKEEPING &amp;nbsp &amp;nbsp&lt;/p&gt;
  
              &lt;/div&gt;
  
  &lt;/body&gt;
  
  
  
  &lt;/html&gt;
  </code></pre>
  
  <p>FULL CSS</p>
  
  <pre><code>html {
      margin: 0px;
      padding: 0px;
  
   }
  
   body {
  
      font-family:'Futura', sans-serif;
      color: #FFFFFF;
      font-size: 13;
      margin: 0px;
      padding: 0px;
  }
  
  #main {
      border-top: 10px solid #EAE1C9;
      border-right: 10px solid #EAE1C9;
      border-left: 10px solid #EAE1C9;    
      padding-bottom: 20px;
      background: url('../img/bg-jacobs.jpg') repeat;
      background-color:#96B9BF;
  }
  
  
  a {
      color: #FFFFFF;
      text-decoration: none;
  }
  
  #facebook img{
      float: right;
      padding: 45px 5px 10px 10px;
      position: static;
  }
  
  #twitter img{
      float: right;
      padding: 45px 50px 20px 0px;
      position: static;
  }
  #header img {
          padding: 40px 0px 0px 40px;
          float: left;
          position: static;
  }
  
  ul.nav {
      margin-top: 45px;
      list-style: none;
      text-transform: uppercase;
      float: right;
      position: relative;
  
  }
  
  ul.nav li {
      margin: 0px 50px 0px 60px;
      display: inline;
  
  }
  
  ul.nav li a {
      color: #FFFFFF;
  }
  
  #pictures img{
      width:"80%";
      margin: 0 auto;
      padding-bottom: 80px;
      padding-top: 20px;
      display: block;
      text-align: center;
  
  }
  
  #copyright {
      text-align: right;
      background: #867131;
      border-top: 10px solid #EAE1C9;
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 30px;
      font-size: 10px;
      letter-spacing: 2px;
      color: white;
  }
  
  
  .container{
      width: auto; 
      margin: 0 auto;
  }
  
  
  
  .clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}
  </code></pre>