Max-width не работает для IE 11 - программирование

Я очень новый дизайнер и создал свою собственную тему WordPress, и она работает, как и ожидалось, в FireFox, Chrome и Opera. Проблема приходит с InternetExplorer (я использую Windows 7 с IE 11).

Кажется, что InternetExplorer 11 не понимает CSS максимальной ширины. У меня есть этот CSS:

.vi-container {
    margin: 0 auto;
    position: relative;
    width: 100%;
}

.vi-content {
    margin: 0 auto;
    max-width: 1200px;
    overflow: hidden;
}

Код HTMl выглядит примерно так:

<div class="vi-container">
    <header class="vi-header">Header stuff</header>
    <main class="vi-content" itemtype="http://schema.org/Blog" itemprop="mainContentOfPage" itemscope="" role="main">
        <article class="post-content-wrap" itemtype="http://schema.org/BlogPosting" itemprop="blogPost" itemscope=""></article>
        <!-- more articles with contents -->
        <aside class="vi-sidebar" itemtype="http://schema.org/WPSideBar" itemscope="" role="complementary"></aside>
    </main>
</div>

Максимальная ширина 1200 пикселей полностью игнорируется InternetExplorer. Вы можете увидеть его в реальном времени, загружая мою веб-страницу в IE и в другом браузере, чтобы сравнить. Например: http://www.vozidea.com/limpia-la-base-de-datos-wordpress-con-wp-sweep

И вот пример JSfiddle: http://jsfiddle.net/z4s01yxz/

Я нашел другие статьи в StackOverflow о проблемах с максимальной шириной в IE, но не смог получить исправление bymyself, поэтому я обращаюсь за помощью. Надеюсь, что кто-то может дать мне руку с этим, спасибо заранее.

Фактическая проблема заключается в том, что в InternetExplorer веб-страница расширяется, чтобы заполнить всю ширину, поскольку max-width игнорируется. Вы можете проверить это изображение, чтобы увидеть разницу: i.imgur.com/kGr8wk1.jpg

P.S: Извините за мой плохой английский.

Ответ 1