HTML/CSS左、右div在Chrome上并排显示，但在Safari/Firefox上不显示

我很难在Firefox和Safari中并排对齐div，但是在Chrome中效果很好。这是很难给所有的css，因为我有一个移动样式表，一个正常的，然后打印一个，这是一个问题。其他样式表工作得很好。如果需要更多信息来解决这个问题，请让我知道

有关详细信息，请访问我的网站

Chrome页面的图像：

Firefox页面的图像：

我的HTML设置基本如下：

<div class="page">
    <div class="content">
                    <div class="left-content"></div>
                    <div class="right-content"></div>
            </div>
    </div>

将css更改为-

.left-content{
    width:450px;
    text-align:left;
    float:left;
 }
 .right-content{
    width:450px;
    float:right; (or float:left and some margin-left)
  }

---

将您的CSS更改为此

.left-content{
    width:450px;
    display:inline-block;
vertical-align:top;
margin-top:0px;
    padding-top:0px;
margin-right:auto;
margin-left:auto;

}
.right-content{
    width:450px;
    display:inline-block;
vertical-align:top;
    margin-top:0px;
    padding-top:0px;
margin-right:auto;
margin-left:auto;

}

---

我通过在正确的内容中添加一个顶级css元素来解决这个问题，但是这使得Chrome的右侧下降了很多，并将问题从所有其他浏览器转移到了Chrome。我使用css技术使Chrome正常工作，据我所知，它工作得很好。

不确定为什么会有

-webkit box shadow:none两次，或
文本对齐：左位置：相对
添加到
。左内容
添加相对位置使Firefox上的间距大得多，根本不会影响Chrome。这似乎没有改变任何东西。当我从右栏删除绝对值时，它从左栏开始，但在页面的右侧。这不起作用。你能在上查看一下这个网站并仔细看看吗？这让我看到了404页面我删除了那个测试页面。我发布了我的解决方案，但我还不能将自己标记为正确答案
.left-content{
    width:450px;
    display:inline-block;
vertical-align:top;
margin-top:0px;
    padding-top:0px;
margin-right:auto;
margin-left:auto;

}
.right-content{
    width:450px;
    display:inline-block;
vertical-align:top;
    margin-top:0px;
    padding-top:0px;
margin-right:auto;
margin-left:auto;

}