Why doesn't my css grid columns work on my navigation?

Question

I'm brushing up on Responsive Grid CSS on YouTube. Following along with the instructors lesson. I'm having trouble formatting my nave grid. I've included both the html and css code along with pictures of his nav results vs mine. Any help would be appreciated.

I'm trying to get the navigation bar in a 4 column grid. I'm trying to see what I'm missing here.

Instructor Results:

My Results:

/* CSS Variables */

 :root {
  --primary: #ddd;
  --dark: #333;
  --light: #fff;
  --shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
}

html {
  box-sizing: border-box;
  font-family: Arial, Helvetica, san-serif;
  color: var(--dark);
}

body {
  background: #ccc;
  margin: 30px 50px;
  line-height: 1.4;
}

.btn {
  background: var(--dark);
  color: var(--light);
  padding: 0.6rem 1.3rem;
  text-decoration: none;
  border: 0;
}

img {
  max-width: 100%;
}

.wrapper {
  display: grid;
  grid-gap: 20px;
}


/* Navigation */

.main-nav ul {
  display: grid;
  grid-gap: 20px;
  padding: 0px;
  list-style: none;
  grid-template-columns: repeat(4, 1fr);
}

<div class="wrapper">

  <!-- Navigation -->

  <nav class="main-nav">

    <ul>
      <li><a href="#">Home</li>
        <li><a href="#">About</li>
        <li><a href="#">Services</li>
        <li><a href="#">Contact</li>
       </ul>
      </nav>
    
      <!-- Top Container -->
    
      <section class="top-container">
    
       <header class="showcase">
        <h1>Damn That Looks Delicious</h1>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam sem et tortor consequat id porta. 
        </p>
    
        <a href="#" class="btn">Read More</a>



        </header>

        <div class="top-box top-box-a">
          <h4>Membership</h4>
          <p class="price">$199/mo</p>
          <a href="" class="btn">Buy Now </a>

        </div>

        <div class="top-box top-box-b">
          <h4>Pro Membership</h4>
          <p class="price">$299/mo</p>
          <a href="" class="btn">Buy Now </a>

        </div>

        </section>


        <!-- Boxes Section -->

        <section class="boxes">
          <div class="box">
            <i class="fas fa-pizza-slice fa-4x"></i>
            <h3>Restaurants</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
          </div>

          <div class="box">
            <i class="fas fa-utensils fa-4x"></i>
            <h3>Chefs</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
          </div>

          <div class="box">
            <i class="fas fa-hamburger fa-4x"></i>
            <h3>Catering</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
          </div>

          <div class="box">
            <i class="fas fa-ice-cream fa-4x"></i>
            <h3>Sweets</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
          </div>

        </section>

        <section>

          <img src="images/dtld.jpg" alt="">

          <div>
            <h2> Your Business On DTLD</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

            <a href="#" class="btn">Learn More</a>

          </div>

        </section>

        <!-- Portfolio Section -->

        <section class="portfolio">

          <img src="https:/source.unsplash.com/random/200x200" alt="">
          <img src="https:/source.unsplash.com/random/201x200" alt="">
          <img src="https:/source.unsplash.com/random/202x200" alt="">
          <img src="https:/source.unsplash.com/random/203x200" alt="">
          <img src="https:/source.unsplash.com/random/204x200" alt="">
          <img src="https:/source.unsplash.com/random/205x200" alt="">
          <img src="https:/source.unsplash.com/random/206x200" alt="">
          <img src="https:/source.unsplash.com/random/207x200" alt="">
          <img src="https:/source.unsplash.com/random/208x200" alt="">

        </section>

        <!-- Footer -->

        <footer>
          <p> Damn That Looks Delicious &copy; 2005</p>
        </footer>


</div>

<!-- Wrapper Ends -->

Answer 1

Once you add the closing tag to your anchor elements the layout works as you expect.

This is what you have now:

.main-nav ul {
  display: grid;
  grid-gap: 20px;
  padding: 0px;
  list-style: none;
  grid-template-columns: repeat(4, 1fr);
}

<nav class="main-nav">
  <ul>
    <li><a href="#">Home</li>
    <li><a href="#">About</li>
    <li><a href="#">Services</li>
    <li><a href="#">Contact</li>
   </ul>
</nav>

Because the anchor elements are left open (creating invalid HTML code), the browser generates four additional grid items. Now the grid container has eight children: 4 li and 4 a.

Since your code allows for only four items per row, a second row is created to accommodate the other four items. In fact, you always had a four-column grid.

Once you close the anchor tags (creating valid HTML code), only four grid items are rendered.

.main-nav ul {
  display: grid;
  grid-gap: 20px;
  padding: 0px;
  list-style: none;
  grid-template-columns: repeat(4, 1fr);
}

<nav class="main-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
   </ul>
</nav>

Also, you may want to see my answer here for a brief analysis and suggestion regarding unordered lists inside nav elements.

Answer 2

There is missing of closing anchor </a> tag in your code so once you add closing anchor tag in it. Your code will run perfectly. screenshot of missing anchor tag