Centrer compte a rebours .js

Bonjour,

Je crée un site pour un événement (le site n'est pas encore ouvert), et j'y ai intégré ce compte à rebours :

https://www.blog-nouvelles-technologies.fr/1126/lheure-un-compte-a-rebours-et-un-compteur-a-la-facon-apple-html-css-js/

Celui ci s'affiche suite à un widget, où ce code est placé :

<iframe src="http://vivementle27juin.fr/countdown/countdown.html" width="100%" height="250px" align="right">
  <p>Désolé, mais votre navigateur ne supporte pas la balise HTML iframe</p>
</iframe>

Seulement, je n'arrive pas à centrer ce compte à rebours sur ma page...

En voici également le CSS :

ul {
    list-style-image: none;
}
#countdown-blog {
    color: #000000;
    height: 200px;
    margin-left: 33%;
    margin-right: 30%;
}
#countdown-blog div.set {
    float: left;
}
#countdown-blog h2 {
    font-size: 18px;
    text-align: center;
}
#countdown-blog ul {
    height: 103px;
    list-style-type: none;
    padding: 20px 0 5px;
}
#countdown-blog li {
    background: url("filmstrip_countdown_9-0.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    float: left;
    height: 103px;
    width: 53px;
}
#countdown-blog li#s0, li#m0 {
    background: url("filmstrip_countdown_5-0.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
#countdown-blog li#h0 {
    background: url("filmstrip_countdown_2-0.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
#countdown-blog li.comma {
    background: url("comma.png") no-repeat scroll 2px 75px rgba(0, 0, 0, 0);
    width: 12px;
}
#countdown-blog div.separator {
    float: left;
    font: 80px Arial,sans-serif;
    height: 103px;
    padding: 25px 0 0;
}

Merci par avance de l'aide que vous pourrez m'apporter !

Bonne soirée à tous!