Margen: 0 auto no esta centrando mi imagen

Question

May 12, 2013, 01:06 AM

Margen: 0 auto no esta centrando mi imagen

Soy muy nuevo en todo esto y estoy intentando construir este sitio web, pero la imagen principal de la página no está centrada. He intentado todo tipo de cosas centradas pero no funcionan. Además, el porcentaje de ancho también se ignora.

He reajustado el margen / el relleno a 0. No sé lo que podría ser.

css para la foto:

#pictures img{
    width:"70%";
    margin: 0 auto;
    padding-bottom: 80px;
    padding-top: 20px;

}

y el div html que tiene que ver con eso:

<div id="pictures">
    <img src="img/homepage.png" alt="HomePage"></div>

HTML COMPLETO

<!DOCTTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Jacobs Bookeeping</title>

    <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">

    <link rel="stylesheet" href="css/style-no-grid.css" type="text/css" media="screen">

</head>


<body>

    <div class="container clearfix">

    <div id="main">

    <div id="header">
        <img src="img/logo.png" alt="Jacobs Bookkeeping Logo" width="248">
        </div>


    <div id="twitter">
        <a href="twitter.com/"><img src="img/twitter.jpg" alt="Twitter"></a>
    </div>

    <div id="facebook">
        <a href="www.facebook.com/"><img src="img/facebook.jpg" alt="Facebook"></a>
    </div>


        <ul class="nav">
                <li><a href="#">About Us</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact Us</a></li>
                <li class="last"><a href="#">Resources</a></li>
        </ul>


        <div id="pictures">
                    <img src="img/homepage.png" alt="HomePage">
                </div>

            </div>
        </div>

    <div id="copyright">
                <p>K. RONI JACOBS, <em>KEEPER OF THE BOOKS</em> — <a href="[email protected]">EMAIL JACOBS BOOKKEEPING </a> — CALL 206.861.5664 — &copy; 2013 JACOBS BOOKEEPING &nbsp &nbsp</p>

            </div>

</body>



</html>

CSS COMPLETO

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}