Hai divs cạnh nhau - Hiển thị chất lỏng

Tôi đang cố gắng đặt hai div cạnh nhau và sử dụng CSS sau cho nó.

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

#right {
  overflow: hidden;
}

HTML rất đơn giản, hai div trái và phải trong div bao bọc.

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

Tôi đã cố gắng rất nhiều lần để tìm kiếm một cách tốt hơn trên StackOverflow và các trang web khác, nhưng không thể tìm thấy sự trợ giúp chính xác.

Vì vậy, mã hoạt động tốt ngay từ cái nhìn đầu tiên. Vấn đề là ở chỗ, div bên trái sẽ tự động đệm / lề khi tôi tăng chiều rộng bằng (%). Vì vậy, ở độ rộng 65%, div bên trái có một số phần đệm hoặc lề và không được căn chỉnh hoàn hảo với div bên phải, tôi đã cố gắng đệm / lề 0 nhưng không gặp may. Thứ hai, nếu tôi phóng to trang, div bên phải trượt bên dưới div bên trái, Nó giống như không hiển thị chất lỏng.

Lưu ý: Tôi xin lỗi, tôi đã tìm kiếm rất nhiều. Câu hỏi này đã được hỏi nhiều lần nhưng những câu trả lời đó không giúp tôi. Tôi đã giải thích vấn đề là gì trong trường hợp của tôi.

Tôi hy vọng có một sửa chữa cho điều đó.

Cảm ơn bạn.

EDIT: Xin lỗi, tôi gặp sự cố HTML, Có hai div "hộp" ở cả bên trái và bên phải, Họ có phần đệm theo%, Vì vậy, bên trái hiển thị nhiều phần đệm hơn vì chiều rộng lớn hơn. Xin lỗi, CSS ở trên hoạt động hoàn hảo, hiển thị chất lỏng và đã sửa, Xin lỗi vì đã hỏi sai ...

Thay vào đó, hãy thử một hệ thống như thế này:

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

Bạn chỉ cần thả nổi một div nếu bạn sử dụng lề trái ở bên kia bằng với chiều rộng của div đầu tiên. Điều này sẽ hoạt động bất kể thu phóng là gì và sẽ không có vấn đề về pixel phụ.

Điều này thật dễ dàng với một 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>

Sử dụng CSS này cho trang web hiện tại của tôi. Nó hoạt động hoàn hảo!

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

Đây là câu trả lời của tôi cho những người đang Googling:

CSS:

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

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

Đây là HTML:

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

Làm cho cả hai div như thế này. Điều này sẽ sắp xếp cả hai div bên cạnh nhau.

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

lề phải không cần thiết mặc dù.