Deux div côte à côte - Affichage fluide

J'essaie de placer deux div côte à côte et d'utiliser le CSS suivant pour cela.

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

#right {
  overflow: hidden;
}

Le HTML est simple, deux div gauche et droit dans un div wrapper.

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

J'ai essayé tant de fois de chercher un meilleur moyen sur StackOverflow et d'autres sites aussi, mais je n'ai pas pu trouver l'aide exacte.

Ainsi, le code fonctionne très bien à première vue. Le problème est que le div gauche obtient automatiquement le remplissage / la marge lorsque j'augmente la largeur en (%). Donc, à 65% de largeur, le div gauche a un rembourrage ou une marge et n'est pas parfaitement aligné avec le div droit, j'ai essayé de rembourrage / marge 0 mais pas de chance. Deuxièmement, si je fais un zoom avant sur la page, la div droite glisse sous la div gauche, son affichage n'est pas fluide.

Remarque: je suis désolé, j'ai beaucoup cherché. Cette question a été posée plusieurs fois mais ces réponses ne m'aident pas. J'ai expliqué quel est le problème dans mon cas.

J'espère qu'il y a une solution à cela.

Je vous remercie.

EDIT: Désolé, moi problème HTML, Il y avait deux divs "box" dans les côtés gauche et droit, Ils avaient un remplissage en%, Donc le côté gauche a montré plus de remplissage en raison d'une plus grande largeur. Désolé, le CSS ci-dessus fonctionne parfaitement, son affichage fluide et fixe, Désolé de poser la mauvaise question ...

Essayez plutôt un système comme celui-ci:

.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>

Vous ne devez faire flotter un div que si vous utilisez une marge gauche sur l'autre égale à la largeur du premier div. Cela fonctionnera quel que soit le zoom et n'aura pas de problèmes de sous-pixel.

C'est facile avec une flexbox:

#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>

Utilisation de ce CSS pour mon site actuel. Cela fonctionne parfaitement!

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

Voici ma réponse pour ceux qui recherchent Google:

CSS:

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

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

Voici le HTML:

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

Faites les deux divs comme ça. Cela alignera les deux divisions côte à côte.

.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>

la marge de droite n'est cependant pas nécessaire.