How can I prevent a white border from appearing on the first half of my webpage when zooming in?

I have two divs in my code- one for the first portion of my page and one for the rest as shown below. The issue is that when I zoom in, the first half of the page has a large white border appear to the right of it, almost as a way for it to be able to resize when I zoom in. This issue does not occur for the second half. I'd also like to add that when I zoom in, the background image stays the exact same, meaning no warping whatsoever. How do I fix this?

.firsthalf{
    height: 100vh;
        background-image: linear-gradient(rgba(0, 0, 0, 0.75),rgba(0,0,0,0.75)),url(det.jpg); 
        background-size: cover;   
        background-position: center;
        min-width: 100%;
        overflow-x: hidden  



    

}
.secondhalf{
    background-color: black;
    min-width: 100%;
    display: table;
    height: 4000px;


}

As you can see, I have already tried modifying the overflow settings as well as both the min and max width but all my efforts have been to no avail. Codepen

enter image description here

Both div's should be treated the same so don't mix display: table; on one div, overflow hidden; on an other...
When you change your div's like this you still need to account for the .ib elements you gave a fixed width of 1000px; Change that to max-width: 1000px;

.firsthalf{
  height: 100vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.75),rgba(0,0,0,0.75)),url(det.jpg); 
  background-size: cover;   
  background-position: center;
  width: 100%;
  overflow-x: hidden  
}
.secondhalf{
  background-color: black;
  width: 100%;
  height: 4000px;
  overflow-x: hidden;
}