Navigation width jumps on mobile devices, where and how to change it?

Question

css

There was such a problem - there are 2 pages: index and aboutus, there is a fixed navigation menu the same for both pages, Bootstrap is used, there is one common css, but on mobile devices the width of the navbar for index is displayed normally, but for aboutus it is not, mysterious ones are displayed in the inspector 1020px numbers, which I can't change, nor know what value affects them. Again, the code and css for both pages is identical!
bootstrap 3.3.7 min css and js are included, as well as 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%;
  }
}

Answer 1

So it's hard to tell by eye, it would be helpful to see the site or codepen / jsfiddle .

Answer 2

Here is your code: codepen.io/anon/pen/ZeMGRm
Take a screenshot of what you have jumping, read it 5 times, did not understand anything)