Question

I’m working on THIS site. For some reason, the class ‘title’ and ‘container’ aren’t on the center of the page even though I used ‘margin: 0px auto;’ property. I’m almost 100% sure it’s something within CSS but I can’t figure what.

CSS

.container {
    margin: 0px auto;
    width: 545px;
    height: auto;
}

.title {
    margin: 0px auto;
    width: 600px;
    height: auto;
    text-align: center;
}

.elemento1 {
    float: left;
    width: 266;
    height: auto;
}

.elemento2 {
    float: right;
    width: 266;
    height: auto;
}

.foot {
    clear: both;
}

The front page

<div class="title">
<font size="20">WE LIKE TO PLAY FOOTBALL</font>
</div>

<div class="container">
<div class="elemento1">
<div class="wrap">
<div class="anim">
<p><a title="Edizione 2013" href="http://wordpressitis.altervista.org/edizione-2013/"><img alt="" src="http://wordpressitis.altervista.org/wp-content/uploads/2013/01/dividere-quadrato.jpg"/></a></p>
</div>
</div>
</div>

<div class="foot">
</div>

<div class="elemento1">

<div class="wrap">
<div class="anim">
<a title="Edizione 2013" href="http://wordpressitis.altervista.org/edizione-2013/"><img alt="" src="http://wordpressitis.altervista.org/wp-content/uploads/2013/01/dividere-quadrato.jpg"/></a>
</div>
</div>

<p>
<div class="wrap">
<div class="anim">
<a title="Edizione 2013" href="http://wordpressitis.altervista.org/edizione-2013/"><img alt="" src="http://wordpressitis.altervista.org/wp-content/uploads/2013/01/dividere-quadrato.jpg"/></a>
</div>
</div>
</p>

<div class="wrap">
<div class="anim">
<a title="Edizione 2013" href="http://wordpressitis.altervista.org/edizione-2013/"><img alt="" src="http://wordpressitis.altervista.org/wp-content/uploads/2013/01/dividere-quadrato.jpg"/></a>
</div>
</div>
</div>


<div class="elemento2">


<div class="wrap">
<div class="anim2">
<a title="Edizione 2013" href="http://wordpressitis.altervista.org/edizione-2013/"><img alt="" src="http://wordpressitis.altervista.org/wp-content/uploads/2013/01/dividere-quadrato.jpg"/></a>
</div>
</div>

<p>
<div class="wrap">
<div class="anim2">
<a title="Edizione 2013" href="http://wordpressitis.altervista.org/edizione-2013/"><img alt="" src="http://wordpressitis.altervista.org/wp-content/uploads/2013/01/dividere-quadrato.jpg"/></a>
</div>
</div>
</p>

<div class="wrap">
<div class="anim2">
<a title="Edizione 2013" href="http://wordpressitis.altervista.org/edizione-2013/"><img alt="" src="http://wordpressitis.altervista.org/wp-content/uploads/2013/01/dividere-quadrato.jpg"/></a>
</div>
</div>
</div>

<div class="foot">
</div>
</div>

Answer 1

Add .wrap{margin:0 auto;}. And take down the width from this class. For me it works.