慕家居界面 header部分右侧的搜索框，在网页整体缩小的时候下边框会不见

# 具体遇到的问题
慕家居界面 header部分右侧的搜索框，在网页整体缩小的时候下边框会不见。

而且整个搜索框会掉下来；为什么其他内容缩小不会掉下来呢？这种问题要怎么解决呢？
# 报错信息的截图
# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

  <!-- header区域 -->
  <header class="mjj">
    <div class="center-wrap clearfix">
      <!-- logo区 -->
      <div class="logo">
        <h1>慕家居</h1>
        <img src="images/logo.png" alt="慕家居">
      </div>
      <!-- 短链接区 -->
      <ul class="clearfix">
        <li>
          <a href="">
            <div class="box-border">
              <div class="web-home icon"></div>
            </div>
            <span class="db">网站首页</span>
          </a>
        </li>
        <li>
          <a href="">
            <div class="box-border">
              <div class="about-us-top icon"></div>
            </div>
            <span class="db">关于我们</span>
          </a>
        </li>
        <li>
          <a href="">
            <div class="box-border">
              <div class="ser-pro icon"></div>
            </div>
            <span class="db">服务建设</span>
          </a>
        </li>
        <li>
          <a href="">
            <div class="box-border">
              <div class="pro-center icon"></div>
            </div>
            <span class="db">产品中心</span>
          </a>
        </li>
        <li>
          <a href="">
            <div class="box-border">
              <div class="service-hall icon"></div>
            </div>
            <span class="db">服务大厅</span>
          </a>
        </li>
      </ul>
      <!-- 搜索框 -->
      <div class="search clearfix">
        <input type="text" placeholder="请输入搜索内容">
        <div class="icon"></div>
      </div>
    </div>
  </header>

css 部分

/* header 区域 */
.mjj {
  width: 100%;
  height: 121px;
  padding: 19px 0 0 11px;
  box-sizing: border-box;
  min-width: 1201px;
}
/*header logo区 */
/* 左侧logo文字：字体颜色为#0058AA，鼠标移入时变成小手状。 */
.mjj .center-wrap .logo {
  width: 192px;
  height: 91px;
  float: left;
  cursor: pointer;
  margin-right: 109.1px;
  position: relative;
}
.mjj .center-wrap .logo h1 {
  /* float: left;
  font-size: 64px;
  color: #0058AA;
  line-height: 91px;
  margin-right: 109.1px;
  cursor: pointer; */
  position: absolute;
  z-index: -99;
  color: transparent;;
}
.mjj .center-wrap .logo img {
  width: 192px;
  position: absolute;
  z-index: 99;
}
/*header 短链接区 */
.mjj .center-wrap ul {
  float: left;
  width: 560px;
  margin-right: 62px;
}
.mjj .center-wrap ul>li {
  float: left;
  width: 64px;
  height: 91px;
  margin-right: 60px;
  font-size: 16px;
  position: relative;
}
.mjj .center-wrap ul>li:last-child {
  margin-right: 0;
}
.mjj .center-wrap ul>li a {
  color: #545454;
}
.mjj .center-wrap ul>li a .icon {
  width: 33px;
  height: 33px;
  background-image: url(../images/css-icon.png);
  position: absolute;
  top: 50%;
  margin-left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.mjj .center-wrap ul>li a .box-border{
  width: 50px;
  height: 50px;
  position: relative;
  top:3px;
  margin-left: 50%;
  transform: translateX(-50%);
  background-color: transparent;
  box-sizing: border-box;
  border-radius: 50%;
}
/* 短链接部分动画效果 */
/* 鼠标移入导航图标时，背景色变为#0058AA且有呼吸动画效果 */
.mjj .center-wrap ul>li a .box-border:hover {
  background-color: #0058AA;
  top:3px;
  margin-left: 50%;
  animation: small-big 0.5s ease 0s infinite alternate;
}
@keyframes small-big {
  from {
    transform:translateX(-50%) scale(1.0);
  }
  to {
    transform:translateX(-50%) scale(1.1);
  }
}
.mjj .center-wrap ul>li a span {
  margin-top: 20px;
}
/* 短链接部分动画效果 */
.mjj .center-wrap ul>li a .web-home {
  background-position: -22px -23px;
}
.mjj .center-wrap ul>li a .box-border:hover .web-home {
  background-position: -73px -20px;
}
.mjj .center-wrap ul>li a .about-us-top {
  background-position: -21px -65px;
}
.mjj .center-wrap ul>li a .box-border:hover .about-us-top {
  background-position: -71px -65px;
}
.mjj .center-wrap ul>li a .ser-pro {
  background-position: -21px -107px;
}
.mjj .center-wrap ul>li a .box-border:hover .ser-pro {
  background-position: -68px -107px;
}
.mjj .center-wrap ul>li a .pro-center {
  background-position: -22px -146px;
}
.mjj .center-wrap ul>li a .box-border:hover .pro-center {
  background-position: -69px -144px;
}
.mjj .center-wrap ul>li a .service-hall {
  background-position: -21px -183px;
}
.mjj .center-wrap ul>li a .box-border:hover .service-hall {
  background-position: -69px -180px;
}
/*header 搜索框 */
/* ）右侧搜索框：分输入框和搜索按钮两部分，鼠标移入搜索按钮时变成小手状 */
.mjj .center-wrap .search {
  float: left;
  height: 37px;
  box-sizing: border-box;
  margin-top: 32px;
}
.mjj .center-wrap .search input {
  outline: none;
  font-size: 14px;
  color:#545454;
  line-height: 35px;
  float: left;
  width: 212px;
  height: 35px;
  border: 1px solid #D3D3D3;
  border-radius: 1px 0 0 1px;
  padding-left: 15px;
}
.mjj .center-wrap .search .icon {
  width: 48px;
  height: 37px;
  background-color: #0058AA;
  background-image: url(../images/css-icon.png);
  background-position:-129px -21px;
  border-radius: 0 1px 1px 0;
  float:left;
  cursor: pointer;
}

​

在这里输入代码，可通过选择【代码语言】突出显示