Why isn't the flex-direction going from row to column

Question

I'm coding using the Front-ENd Web Development [The Big Nerd Ranch Guide] book to help me better understand css and javascript. There's a project where I'm learning how to use media queries and im suppose to changed the flex-direction property from a row to a column. I've copied the code as its shown and for some odd reason the code doesn't change the direction. It Follows everything before and after that piece of code. I'm hoping a extra pair of eyes can help me spot where I went wrong and help me understand media-queries & flexbox better.

    <main class="main-content">
    <ul class="thumbnail-list">

      <li class="thumbnail-item">
        <a href="#">
          <img src="img/otter1.jpg" alt="Barry The Otter" class="thumbnail-image">
          <span class="thumbnail-title">Barry</span>
        </a>
      </li>

      <li class="thumbnail-item">
        <a href="#">
          <img src="img/otter2.jpg" alt="Robin The Otter" class="thumbnail-image">
          <span class="thumbnail-title">Robin</span>
        </a>
      </li>

      <li class="thumbnail-item">
        <a href="#">
          <img src="img/otter3.jpg" alt="Maurice The Otter" class="thumbnail-image">
          <span class="thumbnail-title">Maurice</span>
        </a>
      </li>

      <li class="thumbnail-item">
        <a href="#">
          <img src="img/otter4.jpg" alt="Lesley The Otter" class="thumbnail-image">
          <span class="thumbnail-title">Lesley</span>
        </a>
      </li>

      <li class="thumbnail-item">
        <a href="#">
          <img src="img/otter5.jpg" alt="Barbara The Otter" class="thumbnail-image">
          <span class="thumbnail-title">Barbara</span>
        </a>
      </li>



      <li class="thumbnail-item">
        <a href="#">
          <img src="img/otter1.jpg" alt="Barry The Otter" class="thumbnail-image">
          <span class="thumbnail-title">Barry</span>
        </a>
      </li>

      <li class="thumbnail-item">
        <a href="#">
          <img src="img/otter2.jpg" alt="Robin The Otter" class="thumbnail-image">
          <span class="thumbnail-title">Robin</span>
        </a>
      </li>

      <li class="thumbnail-item">
        <a href="#">
          <img src="img/otter3.jpg" alt="Maurice The Otter" class="thumbnail-image">
          <span class="thumbnail-title">Maurice</span>
        </a>
      </li>

      <li class="thumbnail-item">
        <a href="#">
          <img src="img/otter4.jpg" alt="Lesley The Otter" class="thumbnail-image">
          <span class="thumbnail-title">Lesley</span>
        </a>
      </li>

      <li class="thumbnail-item">
        <a href="#">
          <img src="img/otter5.jpg" alt="Barbara The Otter" class="thumbnail-image">
          <span class="thumbnail-title">Barbara</span>
        </a>
      </li>

    </ul>
______________________________________________________________________________

CSS


@media all and (min-width: 768px){

  .main-content{
    flex-direction: row;
    overflow: hidden;

  }

  .thumbnail-list{
    flex-direction: column;
    margin-left: 20px;
    order: 0;

    }

    .thumbnail-item{
      max-width: 260px;

    }

    .thumbnail-item + .thumbnail-item{
      margin-top: 20px;

    }


  }

Answer 1

Add display:flex; at the top of class thumbnail-list in the css. This should solve the problem. At the moment you don't seem to be telling the css to use flexbox in the first place.