Duas divs lado a lado - exibição de fluido

Estou tentando colocar duas divs lado a lado e usando o CSS a seguir.

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

#right {
  overflow: hidden;
}

O HTML é simples, duas div esquerda e direita em uma div de wrapper.

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

Tentei várias vezes procurar uma maneira melhor no StackOverflow e em outros sites também, mas não consegui encontrar a ajuda exata.

Portanto, o código funciona bem à primeira vista. O problema é que a div esquerda recebe preenchimento / margem automaticamente à medida que aumenta a largura em (%). Portanto, com 65% de largura, a div esquerda está com algum preenchimento ou margem e não está perfeitamente alinhada com a div direita. Tentei preencher com a margem 0, mas sem sorte. Em segundo lugar, se eu ampliar a página, a div direita desliza abaixo da div esquerda, é como uma exibição não fluida.

Nota: desculpe, pesquisei bastante. Esta pergunta foi feita muitas vezes, mas essas respostas não estão me ajudando. Eu expliquei qual é o problema no meu caso.

Espero que haja uma correção para isso.

Obrigado.

EDIT: Desculpe, meu problema de HTML, havia dois divs "box" nos lados esquerdo e direito, eles tinham preenchimento em%, portanto, o lado esquerdo mostrou mais preenchimento por causa da maior largura. Desculpe, o CSS acima funciona perfeitamente, sua exibição fluida e fixa, Desculpe por fazer a pergunta errada ...

Experimente um sistema como este:

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

Você só precisa flutuar uma div se usar a margem esquerda na outra igual à largura da primeira div. Isso funcionará independentemente do zoom e não terá problemas com subpixels.

Isso é fácil com um 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 o meu site atual. Funciona perfeito!

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

Aqui está a minha resposta para aqueles que pesquisam no Google:

CSS:

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

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

Aqui está o HTML:

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

Faça os dois divs assim. Isso alinhará as duas divs lado a lado.

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

margem-direita não é necessária.