Here is my code: click this link to view the complete code
I am attempting to create a horizontal array table. The data in the div elements is sourced from my Google spreadsheet, and I have inserted that data into the div with `id="schedule"`. Each time a new row with topics is added to my spreadsheet, a new "topic" appears in my HTML result, which is desirable. However, all the divs (topics) are arranged vertically instead of horizontally. I also wish to include a button to slide each div from left to right. You can understand what I mean by viewing this script: slide divs with a script. I believe I can implement this myself once I resolve why my result is displayed vertically.
In essence, I want to transition from the current vertical layout: https://i.sstatic.net/assns.jpg To this desired horizontal layout: https://i.sstatic.net/dvEW8.jpg
I attempted to utilize `display:inline-block` on the div with `id="schedule"`, but it did not produce the anticipated change.
Could someone pinpoint the section of my code responsible for stacking each "topic" vertically? How should I modify it to arrange them horizontally alongside each other?
My code:
<!doctype html>
<html>
<head>
<!-- additional linked resources -->
</head>
<body>
<div class="New-schedule">
<div id="schedule"></div>
</div>
</body>
</html>