显示：网格；导致忽略 css 宽度属性的宽度问题

Question

代码

我有 <nav>、<main>、<footer> [按此顺序] 嵌套在我的 <body> 中。我的 <main> 或 <footer> 没有问题。这是导航的 HTML：

* {
  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>

问题

<nav> 宽度似乎被限制在 'imaginary' 边界内，它停留在 325.8px 并且不会扩展超过该范围。目标是 <nav> 达到浏览器宽度的 90%。

尝试过的解决方案

当我删除 display: grid; 时，问题就解决了。 display: grid; 不会对文档的其余部分造成问题；其余功能按预期运行。删除 <nav> 的所有 css 并不能解决问题。

也许有人可以解释为什么 display: grid 导致了这个问题？

Answer 1

尝试将导航中的 max-width: 90% 替换为 width: 90%:

* {
    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>

显示：网格；导致忽略 css 宽度属性的宽度问题

display: grid; is causing width issues ignoring css width properties

html

css

nav

css-grid

代码

问题

尝试过的解决方案