There was such a problem - there are 2 pages: index and aboutus, there is a fixed navigation menu that is the same for both pages, Bootstrap is used, there is one common css, but on mobile devices, the width of the navbar is normally displayed, but aboutus is not, the inspector displays mysterious 1020px digits, which I can neither change, nor find out what value affects them. I repeat the code and css for both pages is identical!
.navbar { margin-bottom: 0; background-color: #35711b; z-index: 9999; border: 0; font-size: 15px !important; line-height: 1.42857143 !important; border-radius: 0; height: 105px; } .container { padding: 0; } .row { margin: 0; } navbar-brand { background: url(../img/logo.png) no-repeat center; width: 263px; vertical-align: middle; margin: 27px 0 0 15px; } .navbar li a, .navbar .navbar-brand { color: #fff !important; font-family: 'Montserrat'; position: relative; text-decoration: none; } #myNavbar2 a:after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; border-bottom: 2px solid #e7b401; transition: 0.4s; } #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%; } } <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> 
