position fixed for internet explorer - html

Question

When the screen width becomes less than 767, the menu turns into a burger and on IE it looks different.
The alignment of items with flex disappears (the burger button and the basket are pressed), I sin on the menu that is positioned with
using fixed (becomes fixed at the checkpoint), I think that on IE the menu still takes its
the place, because of which the alignment occurs with its consideration. If you comment out the menu, everything will be ok.
How to fix it?
enter image description here
header in static condition
enter image description here
<div class="header_body">
<a href="#">
<h1>ze<span>bra</span></h1>
</a>
<div class="wrap-align">
<nav class="header_menu">
<ul class="header_list">
<li>Home</li>
<li>Products</li>
<li>Shopping</li>
<li>Contact</li>
</ul>
</nav>
<div class="price">
<a href="#">
<img src="img/Shape1.png" alt="">
</a>
<span>$35.00</span>
<span>▼</span>
</div>
<div class="header_burger">
<span></span>
</div>
</div>
</div>
//css
.header_body {
position: relative;
display: flex;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
justify-content: space-between;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
height: 86px;
align-items: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
> a {
text-decoration: none;
color: $colorWord_header;
position: relative;
z-index: 5;
display: inline-block;
margin-right: 40px;
}
a > h1 {
font-size: 38px;
font-family: "HelveticaNeueCyr-Bold";
text-transform: uppercase;
}
a > h1 > span {
color: $logo_color;
}
}
.wrap-align {
width: 650px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header_burger {
display: none;
}
.header_menu {
// margin-right: 118px;
}
.header_list {
display: flex;
position: relative;
z-index: 2;
li {
list-style: none;
}
a {
text-decoration: none;
display: inline-block;
color: $colorWord_header;
font-size: 18px;
font-family: "HelveticaNeueCyr-Regular";
padding: 34px 15px;
transition: all 0.3s;
&:hover {
color: #fff;
background-color: $bgc_head;
}
}
}
.price {
position: relative;
z-index: 5;
a {
text-decoration: none;
}
img {
vertical-align: baseline;
}
a + span {
font-size: 24px;
font-family: "HelveticaNeueCyr-Regular";
color: rgb(157, 157, 157);
margin: 0 10px;
}
span + span {
font-size: 18px;
color: rgb(157, 157, 157);
vertical-align: super;
cursor: pointer;
}
}
//#media
.header {
.header_burger {
display: block;
position: relative;
width: 30px;
height: 20px;
position: relative;
z-index: 3;
}
.header_burger:before,
.header_burger:after {
content: "";
position: absolute;
background-color: black;
width: 100%;
height: 2px;
left: 0;
transition: all 0.3s;
}
.header_burger:before {
top: 0;
}
.header_burger:after {
bottom: 0;
}
.header_burger span {
position: absolute;
top: 9px;
left: 0;
background-color: black;
width: 100%;
height: 2px;
transition: all 0.3s;
}
.header_burger.active span {
transform: scale(0);
}
.header_burger.active:before {
transform: rotate(45deg);
top: 9px;
}
.header_burger.active:after {
transform: rotate(-45deg);
bottom: 9px;
}
.header_menu {
position: fixed;
top: -100%;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(255, 255, 255, 0.941);
padding: 130px 0 0 0;
transition: all 0.4s;
z-index: 1;
}
.wrap-align {
width: 300px;
}
.header_menu.active {
top: 0;
}
.header_list {
margin: 0 0 0 20px;
display: block;
li {
// margin: 10px 0;
}
a {
padding: 10px 20px;
}
}
.price {
margin-right: -30%;
}
}