How come my navigation isn't responding to the CSS grid columns I've implemented?

I am currently reviewing Responsive Grid CSS tutorials on YouTube. I am following the instructor's lesson, but I am facing challenges in formatting my nav grid. I have shared both the HTML and CSS code, as well as images showing the comparison between the instructor's navigation results and mine. Any assistance would be greatly appreciated.

I am attempting to create a 4-column grid for the navigation bar, but seem to be missing something crucial here.

Instructor's Navigation Results:

My Navigation Results:

/* Custom 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 Section */

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

  <!-- Navigation Bar -->

  <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>Delicious Food Galore</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>

        <p> Delicious Food Galore &copy; 2022</p>
        
        </footer>


</div>

<!-- End of Wrapper -->

htmlcsscss-grid

Answer №1

By properly closing the anchor tags in your code, you will see the layout working as expected.

Your current code looks like this:

.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>

The issue arises from having open anchor elements (which results in invalid HTML code), causing the browser to generate additional grid items. This means that instead of just four items (4 li and 4 a), there are eight children within the grid container.

Due to your code restricting to only four items per row, a second row is created for the remaining ones. Essentially, you had a four-column grid all along.

https://i.sstatic.net/045sg.png

Upon correcting the anchor tag closures (resulting in valid HTML code), you will see only four grid items rendered.

https://i.sstatic.net/uBogu.png

.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>

Additionally, check out my response here for a brief overview and recommendation regarding unordered lists within nav elements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to retrieve the width and height of a parent element within a nested declaration in SASS?

Is there a way for a child element to automatically adopt the dimensions of its parent? How can I retrieve the width and height values of the parent element in order to achieve this effect? Here is an example code snippet: .thumb { width: 120px; ...

csssass

Is it possible to apply styling to an element based on the position property of its ancestors using only CSS?

Wondering if it's possible to style an element based on its ancestors' CSS property value. Consider the HTML snippet below: <div><!-- ancestor --> <!-- Any number of descendant levels before reaching the target div --> < ...

csscss-position

Customize your payment with a PayPal button tailored to your desired price

I've been tasked with creating a dynamic PayPal button that can receive different values based on user choices. The website has so many options that creating separate buttons for each choice doesn't seem feasible. I've tried researching solu ...

javascriptphphtmlpaypal

Utilizing AngularJS, the method to retrieve the image source from text within a scope variable

In my current project, I have a scope variable that contains a segment of HTML code. Here's an example: $scope.htmlcode = '<img src="image-path/image-name.jpg" /> some plain text,some plain text text etc etc'; My goal is to display o ...

javascripthtmlangularjs

Can you modify the current HTML code of a Wix website?

I am currently developing a website using Wix and have encountered an issue with the page description. Despite editing it in Wix, the changes are not reflecting on the live site. Upon inspecting the source code in Chrome, I identified the problem lies wi ...

htmlvelo

Ensure that the ng-view element has a height of 100% and

Currently, I am working on developing an AngularJS app and my index page consists of a ng-view where all the content is injected using ui-router: <header> <nav class="navbar"> //content for navbar will go here </nav </hea ...

htmlcssangularjs

What is the best way to create divs with no gaps in between them?

I am trying to create a div structure that resembles the one shown below, with one div on top and two divs under it. I would prefer not to use tables, ensuring there is no space between the divs, and if possible, having collapsed borders. _________ | ...

csshtmlcss-position

Do not activate hover on the children of parents using triggers

Check out my demonstration here: http://jsfiddle.net/x01heLm2/ I am trying to achieve two goals with this code. Goal number one is to have the mini thumbnail still appear when hovering over the .box element. However, I do not want the hover event to be tr ...

javascriptjquerycss

Setting up Angular universal web configuration with SSL and automatic redirection to the www subdomain

I'm facing an issue with the web.config file in my Angular Universal project. Here is a snippet of my web.config file: <configuration> <system.webServer> <!-- indicates that the server.js file is a node.js application to be ...

htmlangulartypescriptiisweb-config

What advantages and disadvantages come with choosing between using vh and vw for responsive text?

My main inquiry is centered around the various techniques for creating responsive text. Is there a particular method that stands out as the best option for general use, or do different methods serve distinct purposes? ...

htmlcsstextflexbox

Is there a way to compel @keyframes to continue playing until it reaches its conclusion even after a mouseout event

Whenever I hover over an element, a keyframe animation starts playing. However, when I move the cursor away, the animation stops abruptly. Is there a way to ensure that it plays until the end? I've tried using the animationend event, but it doesn&apos ...

javascriptcssanimationcss-animations

Incorporating Vue.js within Golang's HTML templates

Trying to integrate Vue.js with the Golang's HTML template engine has been a bit tricky. Both use {{ ... }} for syntax, causing conflicts... Has anyone successfully tackled this issue before or have any tips on how to navigate around it? Appreciate ...

htmlgovue.js

Having difficulty with the javascript click() function in an html document

Thank you in advance for checking this out. In my web application, users can choose options from four separate drop-down menus. Once a selection is made, the software triggers a click() function that generates a new span element within a div: var activeF ...

javascriptjqueryhtml

Chrome is unable to establish a connection with the Java HTTP Server

Here is my basic HTTP Server setup: public class MyServer { public static void main(String [] args) throws IOException { Test t = null; int port = 9000; HttpServer server = HttpServer.create(new InetSocketAddress(port), 0) ...

javahtmlhttpbrowserserver

Acquire the stripe color scheme of Bootstrap tables

I have a Razor component that populates a series of divs within a container. Is there a way to utilize the table-striped color scheme for my odd divs without replacing it entirely? Alternatively, if I create a new CSS class called "Div-Stripe-Row." Can ...

cssbootstrap-5

Creating an overflow effect for sliders using only CSS

Is it feasible to develop a slider that extends beyond its parent elements and the body? The concept involves having content within a section housed in a container. The slider would be part of this section, with slides overflowing past the parent element ...

csssliderpositionoverflow

Can one look through a div to the one beneath it by moving the cursor?

Hey there! I have a unique question for you. I've been trying to achieve a specific effect where two divs are stacked on top of each other, and the content of the lower div is only revealed in a certain area around the cursor. Is it possible to make o ...

javascripthtmlcss

Adjust the color of a contenteditable div once the value matches

I currently have a table with some contenteditable divs: <div contenteditable="true" class="change"> This particular JavaScript code is responsible for changing the color of these divs based on their content when the page loads. However, I am now ...

javascriptjqueryhtmlbackground-colorcontenteditable

Upon clicking the "show more information" button on the page, JavaScript executes the function to display additional details

<a href="#" class="button">Read More</a><br> I'm currently struggling with programming a button on my website. Specifically, I need the Read More button to display all information related to the CDs I have for sale when clicked. A ...

javascripthtml

Setting the default value of an input in Angular 2 or higher

I am currently working on incorporating a Component that mirrors a Bootstrap modal with an input field. The input is linked to a variable in the Component class using [(ngModel)]="...". It functions properly when I type text into the input (the variable&ap ...

htmlangulartypescript