Zwei Divs nebeneinander - Flüssigkeitsanzeige

Ich versuche, zwei Divs nebeneinander zu platzieren und verwende das folgende CSS dafür.

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

#right {
  overflow: hidden;
}

Der HTML-Code ist einfach, zwei linke und rechte Div in einem Wrapper-Div.

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

Ich habe so oft versucht, auf StackOverflow und anderen Websites nach einem besseren Weg zu suchen, konnte aber nicht die genaue Hilfe finden.

Der Code funktioniert also auf den ersten Blick einwandfrei. Das Problem ist, dass der linke Teil automatisch aufgefüllt wird, wenn ich die Breite in (%) erhöhe. Bei einer Breite von 65% hat das linke Div etwas Polsterung oder Rand und ist nicht perfekt mit dem rechten Div ausgerichtet. Ich habe versucht, Polsterung / Rand 0, aber kein Glück. Zweitens, wenn ich die Seite vergrößere, gleitet das rechte Div unter das linke Div. Es ist wie keine flüssige Anzeige.

Hinweis: Es tut mir leid, ich habe viel gesucht. Diese Frage wurde schon oft gestellt, aber diese Antworten helfen mir nicht. Ich habe erklärt, was das Problem in meinem Fall ist.

Ich hoffe, es gibt eine Lösung dafür.

Danke dir.

EDIT: Sorry, ich HTML-Problem, Es gab zwei "Box" -Divs sowohl auf der linken als auch auf der rechten Seite. Sie hatten eine Auffüllung in%. Die linke Seite zeigte also mehr Auffüllung aufgrund der größeren Breite. Entschuldigung, das obige CSS funktioniert perfekt, es ist flüssig und behoben. Entschuldigung, dass Sie die falsche Frage gestellt haben ...

Versuchen Sie stattdessen ein System wie dieses:

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

Sie müssen nur ein Div schweben lassen, wenn Sie den linken Rand auf dem anderen verwenden, der der Breite des ersten Div entspricht. Dies funktioniert unabhängig vom Zoom und hat keine Subpixel-Probleme.

Mit einer Flexbox ist das ganz einfach:

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

Verwenden dieses CSS für meine aktuelle Site. Es funktioniert perfekt!

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

Hier ist meine Antwort für diejenigen, die googeln:

CSS:

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

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

Hier ist der HTML:

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

Machen Sie beide Divs so. Dadurch werden beide Divs nebeneinander ausgerichtet.

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

Rand rechts wird jedoch nicht benötigt.