html - 移动菜单按钮不在导航内

Question

我想用下面的代码创建一个移动菜单按钮 <container>在我的里面 <navigation> .到目前为止一切正常。

但是，不知何故移动菜单按钮不会停留在内部 <nav> .
(请参阅与黄色导航相比的绿色容器)

我猜这与宽度和高度的固定像素有关。但是，当我将它们更改为 %-width 时，条形图完全消失了。

我必须在我的代码中更改什么，以便 <container>留在周围<nav> ？

你也可以找到我的代码here

body {
  margin: 0;
}

.header {
  width: 80%;
  height: 10%;
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

.navigation {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.container {
 display: inline-block;
 cursor: pointer;
 float: right;
 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
 background-color: green;
}

.bar1, .bar2, .bar3 {
 width: 35px;
 height: 5px;
 background-color: #333;
 margin: 6px 0;
 transition: 0.4s;
}

<div class="header">	
  <nav class="navigation"> 
    <div class="container">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>	
  </nav>
</div>

Answer 1

从 .header 中删除 height: 10%;，它占用 html 的 10% 高度

body {
  margin: 0;
}

.header {
  width: 80%;
  /* height: 10%; */
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

.navigation {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.container {
 display: inline-block;
 cursor: pointer;
 float: right;
 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
 background-color: green;
}

.bar1, .bar2, .bar3 {
 width: 35px;
 height: 5px;
 background-color: #333;
 margin: 6px 0;
 transition: 0.4s;
}

<div class="header">	
  <nav class="navigation"> 
    <div class="container">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>	
  </nav>
</div>