最大宽度不适用于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>

InternetExplorer完全忽略最大宽度1200px。您可以在IE和其他浏览器中实时加载我的网页进行比较时看到它。例如：http : //www.vozidea.com/limpia-la-base-de-datos-wordpress-con-wp-sweep

这是一个JSfiddle示例：http : //jsfiddle.net/z4s01yxz/

我在StackOverflow中找到了其他有关IE上最大宽度问题的文章，但我自己无法解决此问题，这就是我寻求帮助的原因。希望有人能帮我这个忙，在此先感谢。

实际的问题是，在InternetExplorer中，网页会扩展为填满所有宽度，因为会忽略max-width。您可以检查此图像以查看不同之处：i.imgur.com/kGr8wk1.jpg

PS：对不起，我的英语不好。