CSS dinamically added with Javascript visual bug [closed]

I used this CSS template for my schedule web app, but it has a bug that it needs to be in the responsive form to look good, I just show you, I have no clue why this happens because I'm really new in CSS and I just use this CSS template from GitHub

You can try it yourself in: gilbertomarcano.github.io

Screenshot 1

Screenshot 2

Screenshot 3

Screenshot 4

I'm very sorry if I do not make myself clear but I'm new in this

My HTML li looks like

<div class="cd-schedule cd-schedule--loading margin-top-lg margin-bottom-lg js-cd-schedule">
    <div class="cd-schedule__timeline">
      <ul>
        <li><span>07:00</span></li>
        <li><span>07:30</span></li>
        <li><span>08:00</span></li>
        <li><span>08:30</span></li>
        <li><span>09:00</span></li>
        <li><span>09:30</span></li>
        <li><span>10:00</span></li>
        <li><span>10:30</span></li>
        <li><span>11:00</span></li>
        <li><span>11:30</span></li>
        <li><span>12:00</span></li>
        <li><span>12:30</span></li>
        <li><span>13:00</span></li>
        <li><span>13:30</span></li>
        <li><span>14:00</span></li>
        <li><span>14:30</span></li>
        <li><span>15:00</span></li>
        <li><span>15:30</span></li>
        <li><span>16:00</span></li>
        <li><span>16:30</span></li>
        <li><span>17:00</span></li>
        <li><span>17:30</span></li>
        <li><span>18:00</span></li>
      </ul>
    </div> <!-- .cd-schedule__timeline -->

    <div class="cd-schedule__events">
      <!-- -->
      <ul>
        <li class="cd-schedule__group">
          <div class="cd-schedule__top-info"><span>Monday</span></div>

          <ul id='monday-ul'>
          </ul>
        </li>

        <li class="cd-schedule__group">
          <div class="cd-schedule__top-info"><span>Tuesday</span></div>

          <ul id='tuesday-ul'> 
          </ul>
        </li>

And I append every event using this JS code

createDayEvent(subject, day, weekdayid) {
    // Creating the li element
    const li = document.createElement('li')
    li.classList.add('cd-schedule__event')

    // Creating the em element 
    const em = document.createElement('em')
    em.classList.add('cd-schedule__name')
    em.textContent = subject.name
    em.value = subject.name

    // Creating the a element and its attributes
    const a = this.createElement('a')
    const dataStart = this.createAttribute('data-start', this.intToDate(day.hours[0]))
    const dataEnd = this.createAttribute('data-end', this.intToDate(day.hours[day.hours.length - 1] + 1))
    const dataContent = this.createAttribute('data-content', 'event-abs-workout')
    const dataEvent = this.createAttribute('data-event', 'event-1')
    const href = this.createAttribute('href', '#0')

    // Set attributes
    a.setAttributeNode(dataStart)
    a.setAttributeNode(dataEnd)
    a.setAttributeNode(dataContent)
    a.setAttributeNode(dataEvent)
    a.setAttributeNode(href)

    // Append everything to the correspond element
    a.appendChild(em)

    li.appendChild(a)

    // Getting the correct ul element and append the li
    const weekday = document.getElementById(weekdayid)

    weekday.appendChild(li)
}