移动菜单按钮不会保留在导航中

Question

根据以下代码，我想在<container>内创建一个移动菜单按钮 <navigation>。到目前为止，这一切都很好。

但是，移动菜单按钮不会停留在里面 <nav>。（请参阅绿色容器与黄色导航相比）

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

我需要在代码中更改哪些内容，以便<container>保留在周围的<nav>内？

您还可以找到我的代码here

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

从height: 10%;移除.header，10%身高html

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

条形和条形本身的边距设置太高。试试下面的CSS

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