Cant remove padding in table header column using bootstrap 3 jquery-calendar

Question

i have the following issue. I created a calendar using the jquery-week-calendar by themouette and also i use jquery. The thing is that the hour column is not aligned with the slot columns as you can see in the following fiddle (fiddle will not work in chrome, tried it in firefox and works no problem).

If i use the tag !important in the css

td.wc-time-header-cell {
    /* padding: 5px !important;  this works for timeslotsPerHour: 4*/
    padding-top: 0 !important; 
    /* height: 79px !important; this works for timeslotsPerHour: 4 */
} 

it solves the issue, but when i change the timeslotsPerHour parameter from 2 to 4 or any other value it brakes. I dont know how to fix this. I also tried the following reset.css i found in the project home.

https://github.com/themouette/jquery-week-calendar/blob/master/full_demo/reset.css

but still no go. Could u guys help me out?

i also tried with

td.wc-time-header-cell {
    padding-top: 0 !important; 
    vertical-align:top;
} 

EDIT:

found out that if disabling the following lines in the css worked:

* {
  /* -webkit-box-sizing: border-box; */
  -moz-box-sizing: border-box;
  /* box-sizing: border-box; */
}

Answer 1

This might seem like a stupid answer, but I don't think you can use a value without a unit (px in this case). Try

padding-top: 0px

Hope this helps!!!