Flexbox css doesn't work

I copied chapter 4 index.html to my own ottergram.htm and styles.css to upload them to a test page. The flex css that’s supposed to make everything horizontal etc. doesn’t work. It’s at www.abenorco.com/ottergram.htm.

The CSS and HTML files are copies from the zipped download of the first part of chapter 4 so there should be no typing errors. My first thought was that IE11 from the county library and my WIN8 laptop didn’t support flex coding. Switched to a WIN10 laptop and updated it’s Chrome to make sure it was up-to-date. Also tried Windows Edge assuming it was current. They don’t display the flex directions as specified by the CSS as if the browsers aren’t current, but from the versions I tried, at least one of them should have worked. There shouldn’t be anything wrong with testing at a web host where ftp loaded the test pages because testing has been used there often before.

The main content has a rule for display=column. The

    css is display=flex, however, the default of “row” isn’t followed because it is still stacked up. Could it be that the content CSS is being inherited by the list so it is not being displayed in a row?

Had to add a rule to the class .thumbnail-list so that the list items would be horizontal. It is flex-flow: row wrap. The other problem of the main sections not being in a column was caused by a rule at the end of the css file called @media all etc. which redefined the direction and which the browsers were honoring. When that part was deleted from the css, the page behaved like it was supposed to.