Bootstrap navbar collapse opens in the wrong place - html

Question

Navbar collapsed menu fits perfectly to the navbar in Safari browser and occupy full width of the viewport. However, in other browsers collapsed navbar is getting smaller and sticks to the very top of the page. Looks like it is not connected to the navbar itself and drops down from another reference point. Is this a browser prefix issue or something entirely wrong with my bootstrap structure?
.navbar {
height: 60px;
padding: 0;
margin: 0;
border-bottom: .1px solid black;
background: #ffffff;
}
.navbar-nav {
margin-top: 1.5em;
}
.navBut {
margin: 20px 0;
}
.navButBut {
border: 1px solid red;
}
.navbar-toggle {
border-color: black !important;
color: snow;
height: 30px;
width: 45px;
padding: 2px 5px 0;
margin: 15px 8% 15px 0;
}
.navbar-toggle:hover {
background-color: transparent !important;
}
.dropbut {
font-size: 1.5em;
color: black;
}
.fa-korvue {
color: #962715;
font-size: 3.5em;
line-height: -45%;
float: left;
margin: 5px 8% 0 12%;
}
.link_icon, .link_icon:link, .link_icon:visited, .link_icon:active {
color: #1e1e20;
padding: 0;
margin-right: 20px;
font-family: 'Arsenal', sans-serif;
font-size: 1.2em;
text-decoration: none;
outline: 0;
cursor: pointer;
background: transparent;
}
#collapse_menu {
margin-top: 1.2em;
}
#collapse_menu li a {
padding: 3px 8px;
margin-right: 5px;
border-radius: 3px;
}
#collapse_menu li a:hover {
background-color: rgba(0, 0, 0, 0.2) !important;
}
.hidden-xs {
margin-right: 18px;
}
#phone_handset {
color: black;
font-size: 1.7em;
vertical-align: 10%;
text-decoration: none;
outline: 0;
transition: 1s;
}
#phone_num {
display: inline;
margin-right: 4em;
vertical-align: 20%;
font-size: 1.3em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="fa fa-th dropbut"></span>
</button>
<i class="fab fa-korvue"></i>
<div class="collapse navbar-collapse" id="myNavbar">
<ul id="collapse_menu" class="nav navbar-nav text-center">
<li><a class="link_icon scroll" name="1" href="#top_page_scroll">Начало</a></li>
<li><a class="link_icon scroll" name="2" href="#about_me_scroll">Обо мне</a></li>
<li><a class="link_icon scroll" name="3" href="#portfolio_scroll">Услуги</a></li>
<li><a class="link_icon scroll" name="4" href="#pricing_scroll">Цены</a></li>
<li><a class="link_icon scroll" name="5" href="#contact_me_scroll">Регистрация</a></li>
</ul>
<div class="navbar-nav navbar-right vertical-align">
<a id="phone_handset" class="fas fa-phone-volume hidden-xs" href="#"></a>
<a id="phone_num" class="link_icon hidden-xs" href="#">110-223-456-78</a>
</div>
</div>
</div>
</nav>
</header>

Answer 1

I finally fixed this issue. If you wrap navbar-toggle with <div class=“navbar-header”> then everything starts to work as expected. Now collapsed navbar occupies full width and sits in the right place. Thank #fnostro for the valuable tips.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="fa fa-th dropbut"></span>
</button>
<i class="fab fa-korvue"></i>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul id="collapse_menu" class="nav navbar-nav text-center">
<li><a class="link_icon scroll" name="1" href="#top_page_scroll">Начало</a></li>
<li><a class="link_icon scroll" name="2" href="#about_me_scroll">Обо мне</a></li>
<li><a class="link_icon scroll" name="3" href="#portfolio_scroll">Услуги</a></li>
<li><a class="link_icon scroll" name="4" href="#pricing_scroll">Цены</a></li>
<li><a class="link_icon scroll" name="5" href="#contact_me_scroll">Регистрация</a></li>
</ul>
<div class="navbar-nav navbar-right vertical-align">
<a id="phone_handset" class="fas fa-phone-volume hidden-xs" href="#"></a>
<a id="phone_num" class="link_icon hidden-xs" href="#">110-223-456-78</a>
</div>
</div>
</div>
</nav>
</header>