HTML

I have a <nav>, <main>, <footer> [in this order] nested in my <body>. I have no issues with my <main> or <footer>. Here is the HTML for the nav:

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  height: 100%;
  display: grid;
  place-items: center;
}

nav {
  max-width: 90%;
}

.title-container {
  display: grid;
  place-items: center;
  height: 12rem;
}

.nav-link-container {
  box-sizing: border-box;
  background: #B8B8B8;
  padding: 15px;
  height: 130px;
  overflow-y: scroll;
}

.nav-link-container>header {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.nav-link-container>header:last-child {
  margin-bottom: 0px;
}

<nav id="navbar">
  <div class="title-container">
    <header>
      <h1 class="title red">Git & GitHub Basics</h1>
      <h1 class=title light>Learning Git</h1>
    </header>
  </div>
  <div class=nav-link-container>
    <header><a class="nav-link" href="#Understanding_the_Workflow">Understanding the Workflow</a></header>
    <header><a class="nav-link" href="#Initializing_a_Repository_&_Staging_Files">Initializing a Repository & Staging Files</a></header>
    <header><a class="nav-link" href="#Status,_Unstaging_Files,_&_Committing">Status, Unstaging Files, & Committing</a></header>
    <header><a class="nav-link" href="#Comparing_Files_Changes">Comparing Files Changes</a></header>
    <header><a class="nav-link" href="#GitHub_&_Using_Clone,_Push,_&_Pull">GitHub & Using Clone, Push, & Pull</a></header>
  </div>
</nav>

The Problem

The <nav> width seems to be limited to 'imaginary' boundaries, it's stuck at 325.8px and will not expand past that. The goal is for the <nav> to hit a width of 90% of the browser width.

Tried Solutions

When I remove display: grid; the problem is solved. display: grid; doesnt create a problem for the rest of the document; the rest functions as expected. Removing all the css for the <nav> does not solve the issue.

Maybe someone can explain why the display: grid is causing the issue?

CodePudding user response：

Try to replace max-width: 90% to width: 90% in nav:

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
    height: 100%;
    display: grid;
    place-items: center;
}

nav {
    width: 90%;
}

.title-container {
    display: grid;
    place-items: center;
    height: 12rem;
}

.nav-link-container {
    box-sizing: border-box;
    background: #B8B8B8;
    padding: 15px;
    height: 130px;
    overflow-y: scroll;
}

.nav-link-container > header {
    display: flex;
    /*justify-content: center;*/
    margin-bottom: 16px;
}

.nav-link-container > header:last-child {
    margin-bottom: 0px;
}

<nav id="navbar">
    <div class="title-container"><header><h1 class="title red">Git & GitHub Basics</h1><h1 class=title light>Learning Git</h1></header></div>
    <div class=nav-link-container>
        <header><a class="nav-link" href="#Understanding_the_Workflow">Understanding the Workflow</a></header>
        <header><a class="nav-link" href="#Initializing_a_Repository_&_Staging_Files">Initializing a Repository & Staging Files</a></header>
        <header><a class="nav-link" href="#Status,_Unstaging_Files,_&_Committing">Status, Unstaging Files, & Committing</a></header>
        <header><a class="nav-link" href="#Comparing_Files_Changes">Comparing Files Changes</a></header>
        <header><a class="nav-link" href="#GitHub_&_Using_Clone,_Push,_&_Pull">GitHub & Using Clone, Push, & Pull</a></header>
    </div>
</nav>