Html 溢出：隐藏将内容向右推

我正在制作一个小网站

问题是：

我有一个具有设置高度和宽度的物品标签：

.main-content-wrapper article { color: white; margin: auto; overflow: hidden; }
.main-content-wrapper article { width: 980px; height: 457px; font-size: 20px; }

在firefox和safari中，当设置了

overflow:hidden

时，整个文章都会被推到右边

溢出时：隐藏：

无

溢出：隐藏
：

有人知道为什么吗？在chrome、ie10和opera中，一切都很好

链接：已删除链接
尝试添加

float:left;  /* if you want to float this to left side */
margin: 0px auto; /* if you want to center it horizontaly */

对不起，我有个问题
但是为什么要使用两行相同的选择器呢？：）
 如果我们看一下您的标记：

<div class="row">
    <div class="content-menu-wrapper">
        <nav id="content-menu">
            <ul>
                <li><a href="./article.html">HVA ER OUTPUT?</a></li>
                <li><a href="./article.html">HVOR ER OUTPUT?</a></li>
                <li><a href="./article.html">NÅR ER OUTPUT?</a></li>
            </ul>
        </nav> <!-- end content-menu -->
    </div> <!-- end content-menu-wrapper -->
</div>

<div class="row">
    <div class="main-content-wrapper">
        <article>
            <p>I love pudding jelly bear claw I love cookie 
               croissant pie.......</p>
        </article>
    </div> <!-- main-content-wrapper -->
</div>

overflow:auto
将处理折叠的宽度，您的布局将正常工作

小提琴参考：

跨浏览器评论

Firefox处理浮动的方式似乎与Chrome、Safari/windows和Opera稍有不同。其他人可能对此有所了解。
您能否创建一个JSFIDLE示例为子元素指定固定宽度。@btevfik我尝试过，但无法重新创建它：/n这不起作用。我之所以使用两个，是因为在我的css中，我使用的是媒体查询，顶部选择器是通用的，底部选择器是特定于媒体查询的。问题源于前面的元素（
div.row
），与浮动内容相关，浮动内容会折叠宽度并影响右边距。非常欢迎您的帮助！祝你的项目好运。
.content-menu-wrapper {
    background: url("../images/menu_background.png") repeat-x scroll 0% 0% transparent;
    overflow: auto:
}