2つのdivを並べて表示-流体表示

2つのdivを並べて配置し、次のCSSを使用しようとしています。

#left {
  float: left;
  width: 65%;
  overflow: hidden;
}

#right {
  overflow: hidden;
}

HTMLはシンプルで、ラッパーdivに左と右の2つのdivがあります。

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

StackOverflowや他のサイトでもより良い方法を探すために何度も試みましたが、正確なヘルプが見つかりませんでした。

したがって、コードは一見問題なく動作します。問題は、幅（％）を増やすと、左側のdivが自動的にパディング/マージンを取得することです。したがって、幅が65％の場合、左側のdivにはパディングまたはマージンがあり、右側のdivと完全に揃っていません。次に、ページを拡大すると、右側のdivが左側のdivの下にスライドします。

注：すみません、たくさん検索しました。この質問は何度も尋ねられましたが、それらの答えは私を助けていません。私の場合、何が問題なのかを説明しました。

私はそれに対する修正があることを望みます。

ありがとうございました。

編集：申し訳ありませんが、HTMLの問題です。左側と右側の両方に2つの「ボックス」divがあり、％でパディングがあり、幅が広いため左側がより多くのパディングを示していました。申し訳ありませんが、上記のCSSは完璧に動作し、その流動的な表示と修正が行われています。間違った質問をして申し訳ありません...

代わりにこのようなシステムを試してください：

.container {
  width: 80%;
  height: 200px;
  background: aqua;
  margin: auto;
  padding: 10px;
}

.one {
  width: 15%;
  height: 200px;
  background: red;
  float: left;
}

.two {
  margin-left: 15%;
  height: 200px;
  background: black;
}

<section class="container">
  <div class="one"></div>
  <div class="two"></div>
</section>

最初のdivの幅に等しい他のマージン左マージンを使用する場合、1つのdivをフロートする必要があるだけです。これはズームに関係なく機能し、サブピクセルの問題はありません。

これはフレックスボックスで簡単です：

#wrapper {
  display: flex;
}

#left {
  flex: 0 0 65%;
}

#right {
  flex: 1;
}

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

現在のサイトでこのCSSを使用しています。それは完璧に動作します！

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
} 

これがグーグルの人たちに対する私の答えです：

CSS：

.column {
    float: left;
    width: 50%;
}

/* Clear floats after the columns */
.container:after {
    content: "";
    display: table;
    clear: both;
}

HTMLは次のとおりです。

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
</div>

このように両方のdivを作成します。これにより、両方のdivが並んで配置されます。

.my-class {
  display : inline-flex;
} 

   <div style="height:50rem; width:100%; margin: auto;">
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left; background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
   </div>

margin-rightは必要ありませんが。