HTML/css edit for iphone lockscreen

i combined a couple of themes for my iphone lockscreen, and i couldnt get the date to be aligned at the bottom right side of the screen. (I want it to be at the side of "days") I'm practically new at this so i'm sorry if the code is a bit messy :

 function calculateTime() {

   var Make_It_12_Hour = false;
   var currentTime = new Date();
   var hour = currentTime.getHours();
   var minutes = currentTime.getMinutes();

   if (Make_It_12_Hour) {
     hour = hour % 12;
     hour = (hour) ? hour : 12;
   }

   hour = hour.toString();
   minutes = minutes.toString();

   if (hour.length == 1) {
     hour = "0" + hour;
   }
   if (minutes.length == 1) {
     minutes = "0" + minutes;
   }

   var hour_left = parseInt(hour.charAt(0)).toString(2);
   var hour_right = parseInt(hour.charAt(1)).toString(2);
   var minutes_left = parseInt(minutes.charAt(0)).toString(2);
   var minutes_right = parseInt(minutes.charAt(1)).toString(2);

   hour_left = addZeroes(hour_left, 4);
   hour_right = addZeroes(hour_right, 4);

   minutes_left = addZeroes(minutes_left, 4);
   minutes_right = addZeroes(minutes_right, 4);

   hour_left = reverse(hour_left);
   hour_right = reverse(hour_right);
   minutes_left = reverse(minutes_left);
   minutes_right = reverse(minutes_right);

   guiOutput(hour_left, "1");
   guiOutput(hour_right, "2");
   guiOutput(minutes_left, "3");
   guiOutput(minutes_right, "4");
 }


 function calculateDate() {

   var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
   var currentTime = new Date();
   var day1 = (currentTime.getDate() - 1).toString();
   var day2 = currentTime.getDate().toString();
   var day3 = (currentTime.getDate() + 1).toString();
   var month = currentTime.getMonth();

   if (day1.length == 1) {
     day1 = "0" + day1;
   }
   if (day2.length == 1) {
     day2 = "0" + day2;
   }
   if (day3.length == 1) {
     day3 = "0" + day3;
   }



   var CIRCLE_FILLED = '<div class="c-f"></div>';
   var CIRCLE_EMPTY = '<div class="c-e"></div>';

   var currentTime = new Date();
   var day = currentTime.getDate();
   var dayBinary = day.toString(2);
   dayBinary = addZeroes(dayBinary, 5);
   guiOutput(dayBinary, "date");

   var actualDay = currentTime.getDay();
   console.log(actualDay);

   clearClassAttributes(); /* We need to clear every "selected" class before we can set a new one */
   document.getElementById(actualDay).setAttribute("class", "selected");
   document.getElementById("date1-1").innerText = months[month - 1];
   document.getElementById("date1-2").innerText = months[month];
   document.getElementById("date1-3").innerText = months[month + 1];

   document.getElementById("date2-1").innerText = day1;
   document.getElementById("date2-2").innerText = day2;
   document.getElementById("date2-3").innerText = day3;


 }



 function clearClassAttributes() {
   for (var ic = 0; ic < 7; ic++) {
     document.getElementById(ic).setAttribute("class", "");

   }

 }


 function reverse(s) {
   return s.split("").reverse().join("");
 }


 function addZeroes(input, maxAmount) {
   while (input.length < maxAmount) {

     input = "0" + input;
   }

   return input;
 }



 function guiOutput(time, id) {
   var CIRCLE_FILLED = '<div class="c-f"></div>';
   var CIRCLE_EMPTY = '<div class="c-e"></div>';
   for (var i = 0; i < time.length; i++) {
     var circle = (time.charAt(i) == 1) ? CIRCLE_FILLED : CIRCLE_EMPTY;
     document.getElementById(id + "-" + (i + 1)).innerHTML = circle;
   }

 }



 calculateTime();
 calculateDate();
 setInterval(calculateTime, 2000);
 setInterval(calculateDate, 60000);

* {
  padding: 0;
  margin: 0;
}
#clock {
  margin: auto;
  padding: 40px 0 0 0;
  width: 206px;
}
#date {
  margin: auto;
  padding: 10px 0 0 0;
  width: 222px;
}
.row {
  display: inline-block;
  margin: 0 10px;
}
.c-e,
.c-f {
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4);
}
.c-f {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  margin: 0 0 15px 0;
  background-color: #E6FAE6;
}
.c-e {
  width: 15px;
  height: 15px;
  border-radius: 20px;
  margin: 0 0 15px 0;
  border: 3px solid #838B8B;
  opacity: 0.4
}
.date-line {
  display: inline-block;
  margin: 0 10px;
}
li {
  font-family: 'GeoSansLight', sans-serif;
  font-weight: 300;
}
ul {
  list-style-type: none;
  padding: 0 0 0 10px;
}
li {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 4px 0;
  text-transform: uppercase;
  color: #6D6D6D;
}
li.selected {
  color: #E4E4E4;
}
#day-container {
  position: absolute;
  bottom: 5px;
  left: 1.5px
}
body {
  background: url('bg.png') center center no-repeat;
  background-size: 100%;
}
p.date {
  color: rgba(255, 255, 255, 0.35);
  -webkit-filter: blur(1px);
  text-transform: uppercase;
}
p {
  font-weight: 300;
  color: white;
}
.selected {
  color: rgba(255, 255, 255, 1) ! important;
  -webkit-filter: none ! important;
  #date-container {
    position: absolute;
    width: 150px;
    margin: auto;
    bottom: 5px;
    right: 0px
  }
  .left,
  .right {
    display: inline-block;
  }
  .right {
    border-left: 1px solid #fff;
    margin: 0 0 0 10px;
    padding: 0 0 0 10px;
  }

<html>



<head>



  <title>binary</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">

</head>

<body>

  <div id="clock">

    <div class="row1 row">
      <div id="1-4"></div>
      <div id="1-3"></div>
      <div id="1-2"></div>
      <div id="1-1"></div>
    </div>

    <div class="row2 row">
      <div id="2-4"></div>
      <div id="2-3"></div>
      <div id="2-2"></div>
      <div id="2-1"></div>
    </div>

    <div class="row">
      <div class="splitter">
        <p></p>
      </div>
    </div>

    <div class="row3 row">
      <div id="3-4"></div>
      <div id="3-3"></div>
      <div id="3-2"></div>
      <div id="3-1"></div>
    </div>

    <div class="row4 row">
      <div id="4-4"></div>
      <div id="4-3"></div>
      <div id="4-2"></div>
      <div id="4-1"></div>
    </div>

  </div>


  <div id="date">
    <div id="date-1" class="date-line"></div>
    <div id="date-2" class="date-line"></div>
    <div id="date-3" class="date-line"></div>
    <div id="date-4" class="date-line"></div>
    <div id="date-5" class="date-line"></div>
  </div>

  <div id="date-container">
    <div class="left">
      <p id="date1-1" class="date"></p>
      <p id="date1-2" class="date selected"></p>
      <p id="date1-3" class="date"></p>
    </div>

    <div class="right">
      <p id="date2-1" class="date"></p>
      <p id="date2-2" class="date selected"></p>
      <p id="date2-3" class="date"></p>
    </div>
  </div>





  <div id="day-container">
    <ul>
      <li id="1">Monday</li>
      <li id="2">Tuesday</li>
      <li id="3">Wednesday</li>
      <li id="4">Thursday</li>
      <li id="5">Friday</li>
      <li id="6">Saturday</li>
      <li id="0">Sunday</li>
    </ul>
  </div>







</body>



</html>

Oh and the background is suppose to be dark. - some fonts are white

Any help would be greatly appreciated. Thanks!!