position fixed для IE

Когда ширина экрана становится меньше 767 меню превращается в бургер и вот на IE это выглядит иначе. Пропадает выравнивание элементов с помощью flex, грешу на меню которое спозиционировано с помощью fixed(становится fixed на чекпоинте), думаю, что на IE меню попрежнему занимает свое место, из-за чего выравнивание происходит с его учетом. Если меню закомментить все будет ок. Как это исправить?

тот самый отступ

Как выглядит меню до бургера и после введите сюда описание изображения

<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><a href="">Home</a></li>
                        <li><a href="">Products</a></li>
                        <li><a href="">Shopping</a></li>
                        <li><a href="">Contact</a></li>
                    </ul>
                    </nav>
                <div class="price">
                    <a href="#">
                        <img src="img/Shape1.png" alt="">
                    </a>
                    <span>$35.00</span>
                    <span>&#9660;</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;
    }
}

чекпоинт на 767

.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%;
    }
}

Ответы (0 шт):