[html] Two divs side by side - Fluid display

I am trying to place two divs side by side and using the following CSS for it.

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

#right {
  overflow: hidden;
}

The HTML is simple, two left and right div in a wrapper div.

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

I have tried so many times to search for a better way on StackOverflow and other sites too, But couldn't find the exact help.

So, the code works fine at first glance. Problem is this, that the left div gets padding/margin automatically as I increase width in (%). So, at 65% width, the left div is having some padding or margin and is not perfectly aligned with the right div, I tried to padding/margin 0 but no luck. Secondly, If I zoom in the page, the right div slides below the left div, Its like not fluid display.

Note: I am sorry, I have searched a lot. This question has been asked many times but those answers aren't helping me. I have explained what the problem is in my case.

I hope there is a fix for that.

Thank you.

EDIT: Sorry, me HTML problem, There were two "box" divs in both left and right sides, They had padding in %, So left side showed more padding because of greater width. Sorry, The above CSS works perfect, its fluid display and fixed, Sorry for asking the wrong question...

Make both divs like this. This will align both divs side-by-side.

.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 isn't needed though.

You can also use the Grid View its also Responsive its something like this:

#wrapper {
   width: auto;
    height: auto;
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(6, 1fr);
}

#left{
    text-align: left;
    grid-column: 1/4;
}

#right {
    text-align: right;
    grid-column: 4/6;
}

and the HTML should look like this :

<div id="wrapper">
<div id="left" > ...some awesome stuff </div>
<div id="right" > ...some awesome stuff </div>
</div>

here is a link for more information:

https://www.w3schools.com/css/css_rwd_grid.asp

im quite new but i thougt i could share my little experience

Try a system like this instead:

.container {_x000D_
  width: 80%;_x000D_
  height: 200px;_x000D_
  background: aqua;_x000D_
  margin: auto;_x000D_
  padding: 10px;_x000D_
}_x000D_
_x000D_
.one {_x000D_
  width: 15%;_x000D_
  height: 200px;_x000D_
  background: red;_x000D_
  float: left;_x000D_
}_x000D_
_x000D_
.two {_x000D_
  margin-left: 15%;_x000D_
  height: 200px;_x000D_
  background: black;_x000D_
}

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

You only need to float one div if you use margin-left on the other equal to the first div's width. This will work no matter what the zoom and will not have sub-pixel problems.

Here's my answer for those that are Googling:

CSS:

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

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

Here's the HTML:

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

This is easy with a flexbox:

#wrapper {_x000D_
  display: flex;_x000D_
}_x000D_
_x000D_
#left {_x000D_
  flex: 0 0 65%;_x000D_
}_x000D_
_x000D_
#right {_x000D_
  flex: 1;_x000D_
}

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