flex-direction: row is not working; it's still displaying as a column

Question

I have a nav bar that I want to display as a column on small screens and as a row on desktop screen sizes. My problem is that I do not know why "flex-direction: row;" won't change the nav bar to fit side by side.

.top-nav li {
  list-style-type: none;
  font-size: 22px;
  border: 2px solid #333;
  width: 80%;
  padding: 0;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 2px 2px 2px #333;
}
.top-nav {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}
.top-nav ul {
  padding: 0;
  margin: 0;
}
@media (min-width: 750px) {
  /* top nav */
  .top-nav {
    flex-direction: row;
  }
  .top-nav li {
    margin: 0;
    width: auto;
  }
}

<div class="top-nav">
  <nav>
    <ul>
      <li><a>Home</a></li>
      <li><a>Category</a></li>
      <li><a>Recent</a></li>
      <li><a>All recipes</a></li>
    </ul>
  </nav>
</div>

Answer 1

Problem in your selector scope. Your flex is not working at all to manage your nav item layout. You applying CSS the navigation container not the menu item container. Even when it is showing as a column this is also not credit of flex property here. See below it may help you:

The key part is:

.top-nav ul {
  display: flex;
  flex-direction: row;
}

.top-nav li {
  list-style-type: none;
  font-size: 22px;
  border: 2px solid #333;
  width: 80%;
  padding: 0;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 2px 2px 2px #333;
}

.top-nav {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}

.top-nav ul {
  padding: 0;
  margin: 0;
}

@media (min-width: 750px) {

  /* top nav */

  .top-nav {
    flex-direction: row;
  }
  
  .top-nav ul {
	 display: flex;
  	 flex-direction: row;
  }

  .top-nav li {
    margin: 0;
    width: auto;
  }

<div class="top-nav">
  <nav>
    <ul>
      <li><a>Home</a></li>
      <li><a>Category</a></li>
      <li><a>Recent</a></li>
      <li><a>All recipes</a></li>
    </ul>
  </nav>
</div>

Answer 2

Following changes in Your CSS For solution

.top-nav li {
  list-style-type: none;
  font-size: 22px;
  border: 2px solid #333;
  width: 80%;
  padding: 0;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 2px 2px 2px #333;
}

.top-nav {
 text-align: center;
  justify-content: center;
}

.top-nav ul 
{
    padding: 0;
    margin: 0;
    display: flex;
}

@media screen and (max-width: 480px) 
{

.top-nav ul 
{

   flex-direction:column;
}

  
  .top-nav li
  {
    margin: 0;
    width: auto;
  }
  


}

<div class="top-nav">
  <nav>
    <ul>
      <li><a>Home</a></li>
      <li><a>Category</a></li>
      <li><a>Recent</a></li>
      <li><a>All recipes</a></li>
    </ul>
  </nav>
</div>