IE11でflexboxが崩れる

こんにちは。

よくある質問で、申し訳ありません。

flexboxを利用し、企業ホームページのヘッダー部分を制作しております。
Chrome、firedox等は大丈夫ですが、IE11においてバグが発生します。
現象として、右にずれて（はみ出て）しまいます。

web上の各サイト、特に「flexboxバグまとめ」（http://qiita.com/hashrock/items/189db03021b0f565ae27）などを読みましたがイマイチ理解出来ませんでした。

どうすれば宜しいでしょうか。

以下、htmlです。

<div class="wrapper header_inner">
    <div class="logo">
        <img class="img-responsive" src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="ロゴ" />
    </div>
    <div class="sab_nav">
        <ul>
            <li><a href="#">アクセスマップ</a></li>
            <li><a href="#">お問い合わせ</a></li>
        </ul>
    </div>
</div>

そして、該当するCSSです。

.wrapper {
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
.header_inner {
padding: 20px 0;
display: flex;
justify-content: flex-end;
align-items: center;
}
.logo {
margin-right: auto;
}
.sab_nav ul {
display: flex;
font-size: 15px;
}
.sab_nav li {
margin-left: 10px;
}
.sab_nav li:first-child {
margin-left: 0px;
}
.sab_nav li a {
display: block;
background: #ff0000;
padding: 10px 20px;
color: #fff;
}