在我的HTML页面上div在浏览器调整大小时移动不正确？

Question

我的HTML部分有这个问题

＆＃13;

＆＃13;

#container{
  width: 100%;
  padding: 0 0 0 0%;
  font-size: 0;
}

.container-header-menu{
  position:  fixed;
  margin: auto;
  width: 100%;
  height: 12%;
  padding: 0 0 0 0px;
  z-index: 10;
}

.header{
  width: 100%;
  height: 40px;
  background-color: #182438;
  position: relative;
  top: 0;
  margin: auto;
  text-align: center;
  display:inline-block;
  font-size: 1rem;
}

.header-left-text{
  float: left;
  padding-left:40px;
  height: 23px;
  font-family: sans-serif;
  font-size: 18;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  text-align: left;
  color: #ffffff;

}

.header-middle-text{
  font-family:sans-serif;
  font-size: 18;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  text-align: center;
  color: #ffffff;
}

.header-right-text{
  display: inline-block;
  color: #FFFFFF;
  text-align: center;
  vertical-align: middle;
  line-height: normal; 
  float: right;
  padding-right: 1cm;
  font-family: sans-serif;
  font-size: 80%;
}

.menu{
  display:inline-block;
  position:relative;
  top: 0;
  width: 100%;
  height: 40px;
  background-color: #1f2d48;
  margin: auto;
  /*  padding: 0 0 0 40px;*/
  text-align: center;
  font-size: 1rem;
}
.menu-text:first-child{
  padding-left:40px;
}

.menu-text{
  display:inline-block;
  width: 110px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  line-height: normal; 
  float:left;
  padding-right: 2cm;
  font-family: sans-serif;
  font-size: 18;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  text-align: left;
  color: #ffffff;


}

.menu-item{
  display:inline-block;
  margin-right: 10px;
  width:190px;
  float:left;
  text-align:left;
}

.list-container{
  display:inline-block;
  width: 100%;
  position:relative;
  width: 1439px;
  text-align: center;
  font-size: 1rem;

}

＆＃13;

  <div id="container">

    <!--       header and menu bar container -->
    <div class="container-header-menu">

      <!--  header -->
      <div class="header">
        <div><p class="header-left-text"><strong>Lead Tracking: </strong><span class="header-middle-text">John Smith</span></p>
        </div>

        <div>

          <img src="menu.PNG" class="header-right-text" alt="menu">
          <p class="header-right-text">Monday, November 19, 2016</p>
        </div>

      </div>

      <!--             menubar -->
      <div class="menu">

        <div class ="menu-item">
          <p class="menu-text">Mapping</p>
        </div>

        <div class ="menu-item">
          <p class="menu-text">Geology</p>
        </div>

        <div class ="menu-item">
          <p class="menu-text">Engineering</p>
        </div>

        <div class ="menu-item">
          <p class="menu-text">Negotiating</p>
        </div>

        <div class ="menu-item">
          <p class="menu-text">Deal</p>
        </div>

        <div class ="menu-item">
          <p class="menu-text">Rejected</p>
        </div>

        <div class ="menu-item">
          <p class="menu-text">Pass</p>
        </div>
      </div>
    </div>  

＆＃13;

＆＃13;

＆＃13;

问题是，当我调整浏览器窗口的大小时，菜单项会移动并重叠在菜单下的元素上，我需要的是如果浏览器的大小不能包含所有菜单项，则需要隐藏它们水平滚动条将帮助用户看到它们

菜单是@全屏

当用户调整浏览器窗口大小并发生重叠时