css - 当窗口宽度减小时，固定位置的标题与容器 div 重叠

Question

我的标题有一个小问题，我添加了一个媒体查询，当窗口宽度减小时它会变得更高，但它实际上与我的容器重叠。我尝试添加另一个媒体查询以降低容器的顶部位置，但它不起作用

https://jsfiddle.net/Ltqsjhbz/1/

header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  background: black;
  background-position: center;
  height: 200px;
  color: white;
}

#menu li {
  display: inline;
}

@media screen and (max-width: 600px) {
  #menu li {
    display: block;
    margin: 30px;
  }
  header {
    height: 400px;
  }
  #container {
    position: absolute;
    top: 400px;
  }
}

#menu a {
  background-color: #00BFFF;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 40px 4px;
}

#menu a:hover {
  background-color: #0489B1;
}

h1,
h2,
nav {
  text-align: center;
  margin: 30px;
}

h3,
form,
footer {
  text-align: center;
}

#container {
  position: absolute;
  top: 200px;
  left: 0px;
}

.fig {
  display: block;
  margin: auto;
}

<header>
  <h1>Title</h1>
  <h2>title</h2>
  <nav>
    <ul id="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
    </ul>
  </nav>
</header>
<div id="container">
  <img class="fig" src="https://www.organicfacts.net/wp-content/uploads/2013/05/watermelon2.jpg" alt="figure 1">
</div>

Answer 1

将 #container 的基本样式属性移到媒体查询上方，现在媒体查询应该正确覆盖基本样式。

https://jsfiddle.net/Ltqsjhbz/2/