html - 2 列 (どちらもスクロール可能) のレイアウトが異なるブラウザーでめちゃくちゃになる

Question

各列を個別にスクロールできるように、2 列のレイアウトを使用しています。問題は、Firefox と Chrome の間で各列の幅が完全にめちゃくちゃになっていることです。Firefox では、列の幅が chrome よりも 40 ピクセル少ないため、問題が発生しています。私はcss htmlが初めてなので、助けてください：

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
    font-family: arial;
    position: relative;
}

#toolbar {
    width: 100%;
    background: #333;
    color: #F3F3F3;
    padding: 10px 20px;
    height: 38px;
}
#content {
    position: absolute;
    top: 38px;
    left: 0;
    bottom: 0;
    right: 0;
}

#content #left-section {
    position: absolute;
    background: rgb(29, 29, 29);
    left: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
    width:40%;
    padding: 15px;
}
#content #right-section {
    position: absolute;  
    background: rgb(231, 231, 231);  
    padding:15px;
    width:58%;
    right: 0;  top: 0;  bottom: 0;  overflow: auto;  };
}

HTML スケルトンは次のとおりです。

 <div id="wrapper">
       <div id="toolbar">
       </div>
       <div id="content">
            <div id="left-section">
            </div>
            <div id="right-section">
            </div>
       </div>
    </div>