如何设置网格模板

Question

我的CSS在下面。我想要的是标题，该标题应固定在页面顶部，并且宽度等于容器的宽度，而与浏览器的宽度变化无关。但是，我总是得到标题的宽度扩展到Container的宽度。请指导我如何解决？

html {
  font-size: 16px;
}

.container {
  width: 80%;
  margin: 0 auto;
}

header {
  width: 100%;
  display: grid;
  grid-template-columms: auto auto;
  grid-template-rows: 170px 60px;
  position: fixed;
  top: 0px;
  margin: 0 auto;
}

<div class="container">
  <header>
    <div class="cart">
    </div>
  </header>

Answer 1

将header的宽度设置为80％；

自动工作。.

 * {
  margin:0;
  padding:0;
 }
.container {
  width: 80%;
  margin: auto;
  border: 1px solid red;
  height: 150vh;
}

header {
  background: green;
  position: fixed;
  width: 80%;
  top: 0;
  height: 50px;
}

<div class="container">
  <header>
    <div class="cart">
    </div>
  </header>

Codepen Demo