Потому что из-за float: left у .list-schedule li их размеры не влияют на card, поэтому он у вас нулевой высоты, т.о. его фон просто не видно. https://jsfiddle.net/64amzksv/
Дело в том, что если вы даете блоку позицию, то это позиция его верхнего левого угла, а не центра. Чтобы сместить блок в центр ему дается translate, параметры в процентах при этом вычисляются исходя из размеров самого блока. Т.о. вы получаете возможность центровать блок в окне браузера не зная его абсолютных размеров.
Когда блок не умещается в строку он переносится на следующую. Так? Значит нужно чтобы высота видимой области родительского блока для строки была равна одной строке, т.о. все элементы которые перенеслись на вторую строку не будут видны.
адаптированный сайт - это более общее понятие, под этим понимаются сайты одинаково хорошо работающие и на мобильных, и на десктопах. существует два подхода в адаптации - адаптивный "резиновый" дизайн, это когда сайт может растягиваться на больше разрешения или сжиматься под малые без ущерба для функционала и сайты имеющие две версии отдельно для мобильных и отдельно для дескопов.
между inline элементами есть межсимвольный интервал. как между буквами в тексте например. нужно его удалить, либо учесть при расчете ширины элемента li
самое простое сделать так между всеми li:
animation: blink 1s linear infinite;
у вас длительность анимации 1 секунда. а вы просите 4.5 как максимум.
поправьте.
а так же измените keyframes:
0% {color: #fff}
80% {color: #fff}
81% {color: transparent}
100% {color: transparent}