Прыгает ширина навигации на мобильных устройствах, где и как изменить?

Question

tr1dent @tr1dent

Прыгает ширина навигации на мобильных устройствах, где и как изменить?

Возникла такая проблема - есть 2 страницы: index и aboutus, есть фиксированное навигационное меню одинаковое для обеих страниц, использован Bootstrap, есть один общий css, но на мобильных устройствах ширина навбара у index отображается нормально, а у aboutus - нет, в инспекторе отображаются загадочные цифры 1020px, которые я ни могу изменить, ни узнать какое значение на них влияет. Повторюсь, код и css для обеих страниц идентичен!
подключены bootstrap 3.3.7 min css и js, а также jquery 3.1.1 min

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="row">
      <div class="col-sm-3 navbar-header clearfix">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar2">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span> 
					</button>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar1">
						<p>DE</p>
					</button>
        <a class="navbar-brand" href="http://www.bauconsulting.com/">
          <!-- a -->
        </a>
      </div>
      <div class="col-sm-9 clearfix">
        <div class="collapse navbar-collapse clearfix" id="myNavbar1">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#debau">DE</a></li>
            <li><a href="#enbau">EN</a></li>
            <li><a href="#rubau">RU</a></li>
          </ul>
        </div>
        <div class="collapse navbar-collapse clearfix" id="myNavbar2">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="index2.html">HOME</a></li>
            <li><a href="aboutus.html">ABOUT US</a></li>
            <li><a href="services.html">SERVICES</a></li>
            <li><a href="#equipment">EQUIPMENT</a></li>
            <li><a href="#projects">PROJECTS</a></li>
            <li><a href="gallery.html">GALLERY</a></li>
            <li><a href="#contact">CONTACT</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>

#myNavbar2 a:hover:after {
  width: 100%;
}

.navbar-nav li a:hover,
.navbar-nav li.active a {
  color: #e7b401!important;
  /*// background-color: #fff !important;*/
  /*text-decoration: underline;*/
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.navbar-default .navbar-toggle {
  border-color: transparent;
  color: #fff !important;
}

.nav>li>a {
  padding: 10px;
}

#myNavbar2 {
  margin: 15px 0 0;
}

#myNavbar1 li a:hover {
  color: #35711b!important;
  background-color: #e7b401 !important;
  text-decoration: none;
  -webkit-transition: 0.9s;
  -moz-transition: 0.9s;
  -ms-transition: 0.9s;
  -o-transition: 0.9s;
  transition: 0.9s;
}

@media (max-width: 480px) {
  .col-sm-3 {
    padding-right: 0;
    padding-left: 0;
  }
  .navbar {
    height: 55px;
  }
  .navbar-toggle {
    background-color: #e7b401;
  }
  .navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
  }
  .navbar-nav>li>a {
    background: #35711b;
  }
  .navbar-brand {
    width: 200px;
    margin: 0;
    -webkit-background-size: 65%;
    -o-background-size: 65%;
    background-size: 65%;
  }
}