The first challenge I've faced is that how to display the content at the right place, no overlap. I have to set up width for some classes in order to keep them in their position.

The next question is the numbers of the bus lines are not line up, even though they are left aligned. Since they started with different numbers and letters, it's hard to make them really aligned. Therefor, I set borders for those numbers, and center them. It is not only for aligning, but making them more like bus routes in real life.

I have also used different color to reveal available routes and disabled routes. So user has a clear view of which routes are out of service.