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

February 21, 2023

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

>Solution :

Few minor correction to your styling:

since nav is the only child in #primary-header, the flex can be remove
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>