Заголовок неправильно позиционируется в IE

Question

Работа над заголовком и в настоящее время использование Flexbox для позиционирования заголовка, и все расположено по центру правильно, как я хочу, когда я тестирую локально на моем Mac, но когда другие члены моей команды тестируют на компьютерах с IE или Windows, заголовок больше не располагаясь в центре. Это становится полной шириной, расположенной или налево или направо, и я действительно не уверен, что я пропускаю или делаю неправильно. Любая помощь будет оценена.

Как это должно выглядеть

Что он делает на машине с Windows

HTML

<header class="mcc-header ember-view">
<div class="mcc-full mcc-div">
    <div class="mcc-header-content">
    <a href="/" class="mcc-header-logo">
        <span class="mcc-logo-title">MCC Semi</span>
    </a>

    <ul class="mcc-header-nav">
        <li class="mcc-header-nav-item">
            <a href="" class="mcc-header-nav-link guide">Company Profile</a>
        </li>
        <li class="mcc-header-nav-item">
            <a href="" class="mcc-header-nav-link guide">News</a>
        </li>
        <li class="mcc-header-nav-item">
            <a href="" class="mcc-header-nav-link guide">Contact Us</a>
        </li>
        <li class="mcc-header-nav-item">
            <a href="" class="mcc-header-nav-link guide">EN | CN</a>
        </li>
        <li class="mcc-header-nav-item">
            <a href="" class="mcc-header-nav-link guide"></a>
        </li>
        <li class="mcc-header-nav-item">
            <a href="" class="mcc-header-nav-link guide">Login</a>
        </li>
        <li class="mcc-header-nav-item">
            <a href="" class="mcc-header-nav-link guide">Sign Up</a>
        </li>
    </ul>

    </div>
</div>
<div class="mcc-full">
    <div id="main-menu" class="mcc-header-menu">
        <div class="mcc-full">
    <div class="mcc-header-legal">
        <ul class="mcc-header-legal-list">
            <li class="mcc-header-legal-item">
                <a href="" class="guide">Products</a>
            </li>
            <li class="mcc-header-legal-item">
                <a href="" class="guide">Catalog</a>
            </li>
            <li class="mcc-header-legal-item">
                <a href="" class="guide">Applications</a>
            </li>
            <li class="mcc-header-legal-item">
                <a href="" class="guide">Quality</a>
            </li>
            <li class="mcc-header-legal-item">
                <a href="" class="guide">Calendar</a>
            </li>
        </ul>
    </div>
</div>
        <form class="mcchf" id="mcchf-h-search" action="" method="get" title="" role="search">
            <label class="mcchf">Search</label>
            <input class="mcchf" id="mcchf-h-st" type="text" name="q" placeholder="Search">
            <label class="mcchf">Submit search query</label>
            <input class="mcchf" id="mcchf-h-sb" type="submit" value="">
        </form>
    </div>
</div>
</div>
</header>

CSS

.mcc-header {
background-color: #fff;
display: block;
padding-bottom: 24px;
position: fixed;
width: 100%;
height: 90px;
top: 0;
left: 0;
padding-right: 50px;
padding-left: 50px;
z-index: 800
}

.mcc-header-content {
display: flex;
flex-direction: column;
padding-top: 6px
}

.mcc-header-nav {
column-count: 2;
display: block;
width: 100%
}

@media screen and (min-width:760px) {
.mcc-header-content {
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 0
}

.mcc-header-nav {
    column-count: 3;
    width: auto
}
}

@media screen and (min-width:1020px) {
.mcc-header .mcc-header-content {
    align-items: flex-start;
    padding-top: 0
}

.mcc-header .mcc-header-nav {
    column-count: 1;
    width: auto
}
}

.mcc-header-nav-item {
display: block;
text-align: center;
width: 100%
}

@media screen and (min-width:1020px) {
.mcc-header .mcc-header-nav-item {
    display: inline;
    text-align: left;
    width: auto
}
}

.mcc-header-nav-link {
display: block;
margin-bottom: 0;
padding-bottom: 20px;
padding-top: 4px;
white-space: nowrap
}

@media screen and (min-width:760px) {
.mcc-header-nav-link {
    display: inline-block;
    padding-right: 24px
}
}

.mcc-header-legal {
border-bottom: none;
display: flex;
flex-direction: column;
justify-content: center
}

.mcc-header-legal-list {
display: block;
text-align: center;
}

@media screen and (min-width:760px) {
.mcc-header-legal {
    align-items: baseline;
    flex-direction: row;
    margin-top: 0
}

.mcc-header-legal-list {
    text-align: left
}
}

.mcc-header-legal-item {
display: inline-block;
padding-right: 24px;
padding-top: 24px;
text-align: left;
white-space: nowrap
}

.mcc-header-legal-item:last-of-type {
padding-right: 0
}

@media screen and (min-width:1020px) {
.mcc-header .mcc-header-legal-item {
    margin-left: 0 !important;
    padding-top: 8px
}
}

.mcc-header-logo {
display: block;
flex-shrink: 0;
padding-bottom: 0;
padding-top: 8px;
position: relative
}

.mcc-header-logo .mcc-logo-title {
height: 1px;
width: 1px;
position: absolute;
overflow: hidden;
top: -10px
}

#mcchf-h-search {
position: absolute;
top: 56px;
right: 5rem;
width: 250px;
height: 22px
}

#mcchf-h-search label.mcchf {
display: none
}

#mcchf-h-st {
position: absolute;
right: 30px;
width: 225px;
height: 22px;
padding-left: 5px;
cursor: text;
color: #111;
border-bottom: 1px solid #000;
border-top: none;
border-left: none;
border-right: none;
background: #fff;
-webkit-appearance: none;
border-radius: 0;
text-transform: none
}

#mcchf-h-sb {
position: absolute;
top: 0;
right: 0;
overflow: hidden;
width: 18px;
height: 18px;
cursor: pointer;
white-space: nowrap;
color: #000;
border: 0;
background: url('');
}

input {
display: block;
margin-bottom: .667em;
font-family: inherit;
font-size: 1rem;
line-height: 1.333em;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-repeat: repeat-x;
background-size: .09em .09em;
background-position: 0 90%
}