Необходимо сделать адаптивность блока

Доброго времени суток. Подскажите как сделать адаптивность. У меня есть блок, но при ресайзе остается скролл. Я пробовал ставить ширину в процентах, но не получилось

вот мой код

<script type="text/javascript" src="js/jquery.countdown.js"></script>

$(document).ready(function() {

    $("#timer").countdown({

    since: new Date(2015, 8, 6, 00, 00, 00),

    format: "YODHMS",

    layout: '<dl><dt id="years_lbl">YEARS</dt><dd id="years">{ynn}</dd><dt id="months_lbl">MONTHS</dt><dd id="months">{onn}</dd><dt id="days_lbl">DAYS</dt><dd id="days">{dnn}</dd><dt id="hrs_lbl">HOURS</dt><dd id="hours">{hnn}</dd><dt id="mins_lbl">MINUTES</dt><dd id="minutes">{mnn}</dd><dt id="secs_lbl">SECONDS</dt><dd id="seconds">{snn}</dd></dl>'

    });

});

<article class="article-timer">

   <center>

       <div style="font-family:verdana; " id="timer"></div>

    </center>

</article>  <article class="article-timer">

   <center>

       <div style="font-family:verdana; " id="timer"></div>

    </center>

</article>  

А вот собственно сам проблемный CSS

dl { position:relative; height:80px; margin:20px auto 50px; width:810px; height:150px; background:green; font-size:1.5em; color:#000; }

dt { position:absolute; top:10px; left:0; width:135px; text-align:center; padding-top:15px; }

dd {  position:absolute; top:50px; left:0; font-size:2.2em; text-align:center; width:135px; }

dt#years_lbl, dd#years { left:0; }

dt#months_lbl, dd#months { left:135px; }

dd#days { left:270px; }

dd#hours { left:405px;  }

dt#mins_lbl, dd#minutes { left:540px; }

dt#secs_lbl, dd#seconds { left:675px; }

#dl * { text-outline: 1px 1px #000; }

dt#days_lbl {left:290px;}

dt#hrs_lbl {left:415px;}