Question 45045 in Html Question posted in
Some basic documentation can be found here.

How can I make my nav take up full width of parent? – Html

I need my navbar to stretch the full width of the page. Setting the navbar’s width to 100% adds a small amount of extra space to the right for some reason.

This is my code:

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
body {
  margin: 0;
  font-family: "Poppins", sans-serif;
}

.flex {
  display: flex;
  gap: 2rem;
}

.primary-header {
  border: 2px solid blue;
  justify-content: center;
}

.primary-navigation {
  list-style: none;
  padding: 1rem;
  margin: 0;
  background: dodgerblue;
  width: 100%;
  border: 2px solid red;
}

.primary-navigation a {
  text-decoration: none;
  color: #ffffff;
}

.primary-navigation a:hover,
.primary-navigation a:focus {
  color: #afafaf;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Home</title>
</head>

<body>
  <header id="primary-header" class="primary-header flex">
    <nav>
      <ul id="primary-navigation" class="primary-navigation flex">
        <li><a href="index.html">Placeholder</a></li>
        <li><a href="about.html">Placeholder</a></li>
        <li><a href="projects.html">Placeholder</a></li>
        <li><a href="quals.html">Placeholder</a></li>
        <li><a href="cv.html">Placeholder</a></li>
        <li><a href="#">Placeholder</a></li>
        <li><a href="#">Placeholder</a></li>
        <li><a href="#">Placeholder</a></li>
      </ul>
    </nav>
  </header>
</body>

</html>

I bet it’s a really simple fix, but I haven’t coded in a while so I’m a bit rusty. Does anyone know how to fix this? Thanks

Tags:

2

Answers


  1. 0

    There is a difference between full width of the parent div and of your device screen. If you want to make your navbar take full width of your screen implement this code:

    #primary-header { width: 100vw }

    and the vw means viewport width and you are telling the code to make this div take the full width of the screen.

    but if you want to make full width of the parent div use the % sign instead of vw

    I hope I answered your question.

    Login or Signup to reply.
  2. 0

    Few minor correction to your styling:

    1. since nav is the only child in #primary-header, the flex can be remove
    2. primary-navigation is having the flex display, you can use the justify-content: center to centered the menu and remove the width: 100%
    @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
body {
  margin: 0;
  font-family: "Poppins", sans-serif;
}

.flex {
  display: flex;
  gap: 2rem;
}

.primary-header {
  border: 2px solid blue;
  justify-content: center;
}

.primary-navigation {
  list-style: none;
  padding: 1rem;
  margin: 0;
  background: dodgerblue;
  border: 2px solid red;
  
  justify-content: center;
}

.primary-navigation a {
  text-decoration: none;
  color: #ffffff;
}

.primary-navigation a:hover,
.primary-navigation a:focus {
  color: #afafaf;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Home</title>
</head>

<body>
  <header id="primary-header" class="primary-header">
    <nav>
      <ul id="primary-navigation" class="primary-navigation flex">
        <li><a href="index.html">Placeholder</a></li>
        <li><a href="about.html">Placeholder</a></li>
        <li><a href="projects.html">Placeholder</a></li>
        <li><a href="quals.html">Placeholder</a></li>
        <li><a href="cv.html">Placeholder</a></li>
        <li><a href="#">Placeholder</a></li>
        <li><a href="#">Placeholder</a></li>
        <li><a href="#">Placeholder</a></li>
      </ul>
    </nav>
  </header>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search