In my website I have a list of activities. Previously this was just a list of links, clicking the links would result in a dropdown, like so:
On hovering over the links that toggle the explanation under it, a line also appears under it.
Now, I'm redesigning my website using Material Design, but I can't really figure out how to deal with this. For the time being I've used the same structure as I had before, you can have a look here:
Here you can click the box. Upon clicking it, the white div with the explanation appears and the card gets elevated slightly.
Now, currently this is just spanning the whole width of the screen. On mobile this does look quite decent, but as you notice on my desktop computer it looks a bit ridiculous. I've tried experimenting with also allowing the events to be horizontal, but I feel like it takes away the clarity of when the events happen. Just to be clear: this isn't an event list like on Facebook, it's a chronological list of activities that have passed and are in the future.
So in short: how should I clearly line up and show these events, preferably in a way that complies with Material Design.