Missing number - CSS inside document.getElementById("countdown-timer").innerHTML

I'm doing a countdown timer for a project and I'm trying to put days, hours, minutes and seconds inside divs, but no matter what I do they won't get in and I just don't know how to put them inside. The problem is in the script here: document.getElementById("countdown-timer").innerHTML . The divs shows up great, the text is inside but the number that should be above the text and inside the little divs is not there. Is outside. What am I doing wrong? How can I fix them?

Thank you

Problematic divs Image

This is my code:

HTML:

<div id="countdown-timer"></div>

CSS:

#countdown-timer{
font-family: Arimo;
color: #fff;
display: inline-block;
font-weight: 90;
text-align: center;
font-size: 28px;
}

#countdown-timer > div{
padding: 10px;
border-radius: 2px;
background: rgba(0, 0, 0, 0.5);
display: inline-block;
}

#countdown-timer div > span{
padding: 10px;
border-radius: 2px;
background: rgba(0, 0, 0, 0.5);
display: inline-block;
}

.text{
padding-top: 5px;
font-size: 15px;
}

SCRIPT:

var countDownDate = new Date("September 5, 2018 09:30:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);


document.getElementById("countdown-timer").innerHTML = days + "<div><span class='days'></span><div class='text'>days</div></div>" + hours + "<div><span class='hours'></span><div class='text'>hours</div></div>" + minutes + "<div><span class='minutes'></span><div class='text'>minutes</div></div>" + seconds + "<div><span class='seconds'></span><div class='text'>seconds</div></div> ";


if (distance < 0) {
clearInterval(x);
document.getElementById("countdown-timer").innerHTML = "Launch day";
}
}, 1000);