Dos divisiones una al lado de la otra: pantalla fluida

Estoy tratando de colocar dos divs uno al lado del otro y estoy usando el siguiente CSS para ello.

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

#right {
  overflow: hidden;
}

El HTML es simple, dos divisiones izquierda y derecha en una envoltura div.

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

He intentado muchas veces buscar una mejor manera en StackOverflow y otros sitios también, pero no pude encontrar la ayuda exacta.

Entonces, el código funciona bien a primera vista. El problema es que el div izquierdo obtiene relleno / margen automáticamente a medida que aumento el ancho en (%) Entonces, al 65% de ancho, el div izquierdo tiene algo de relleno o margen y no está perfectamente alineado con el div derecho, intenté rellenar / margen 0 pero no tuve suerte. En segundo lugar, si hago zoom en la página, el div derecho se desliza debajo del div izquierdo, no es una visualización fluida.

Nota: lo siento, he buscado mucho. Esta pregunta se ha hecho muchas veces, pero esas respuestas no me están ayudando. He explicado cuál es el problema en mi caso.

Espero que haya una solución para eso.

Gracias.

EDITAR: Lo siento, mi problema de HTML, había dos divs de "caja" en los lados izquierdo y derecho, tenían un relleno en%, por lo que el lado izquierdo mostró más relleno debido al mayor ancho. Lo sentimos, el CSS anterior funciona perfecto, su visualización fluida y fija, lo siento por hacer la pregunta incorrecta ...

Pruebe un sistema como este en su lugar:

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

Solo necesita flotar un div si usa margen izquierdo en el otro igual al ancho del primer div. Esto funcionará sin importar el zoom y no tendrá problemas de subpíxeles.

Esto es fácil con un 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>

Usando este CSS para mi sitio actual. ¡Funciona perfecto!

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

Aquí está mi respuesta para aquellos que están buscando en Google:

CSS:

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

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

Aquí está el HTML:

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

Haz ambos divs así. Esto alineará ambos divs uno al lado del otro.

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

Sin embargo, el margen derecho no es necesario.