Popup Images Different sizes - html

Question

I am working this popup section. On larger screens there are 2 images stacked on the left. When the screen is smaller (tablet/phone) they are side by side.
I cannot find whats wrong here, but my images are different sizes. On the large screen I notice a 1px white line on the left side. On the smaller screens its off on the top.
I noticed the pictures are slightly different sizes. I went back through the my code to see if I could notice anything that was adding this extra white space, but I can't see anything besides the different photo ratios (2000X1333px) and (2000X1376px)...
I am following a video and the persons images seem to be the same size?
Photos and code attached, help very much appreciated!
Large screen
Small Screen
Codepen Link for extra CSS/HTML It may help with clarity, although it doesnt have the images for the visual problem.
<div class="popup__left">
<img src="img/nat-8.jpg" alt="Tour Photo" class="popup__img">
<img src="img/nat-9.jpg" alt="Tour Photo" class="popup__img">
</div>
<div class="popup__right">
×
<h2 class="heading-secondary">Start booking now</h2>
<h3 class="heading-tertiary">Important – Please read the terms and conditions first</h3>
<p class="popup__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum molestias recusandae id consequuntur odio alias dolores culpa reiciendis hic incidunt eos ipsa qui, doloribus consequatur voluptas enim obcaecati laborum mollitia aperiam ut. Molestias dicta, ipsa iusto esse commodi neque unde ipsam dolor quasi? Expedita, earum nemo? Soluta aspernatur nulla, doloremque harum, corrupti unde adipisci id officiis repudiandae vel, odio mollitia. Ab esse placeat quod earum aliquid iure! Ipsum assumenda, recusandae quia perspiciatis maiores quos sunt? Molestiae unde deleniti id repudiandae porro et, incidunt explicabo, similique quibusdam voluptatum a, sunt impedit?</p>
Book now!
</div>
</div>
</div>
.popup {
height: 100vh;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba($color-black, .8);
z-index: 9999;
visibility: hidden;
opacity: 0;
transition: all .3s;
&__content {
#include absCenter;
width: 75%;
background-color: $color-white;
box-shadow: 0 2rem 4rem rgba($color-black, .2);
border-radius: 3px;
display: table;
overflow: hidden;
opacity: 0;
transform: translate(-50%, -50%) scale(.25);
transition: all .4s .2s;
}
&__img {
display: block;
width: 100%;
#include respond(tab-port) {
display: inline-block;
width: 49%;
}
}
&__left {
width: 33.333333%;
display: table-cell;
#include respond(tab-port) {
display: block;
width: 100%;
padding: 3rem 5rem 0rem 5rem;
}
}
&__right {
width: 66.666667%;
padding: 3rem 5rem;
display: table-cell;
vertical-align: middle;
#include respond(tab-port) {
display: block;
width: 100%;
}
}
&__text {
font-size: 1.4rem;
margin-bottom: 4rem;
-moz-column-count: 2;
-moz-column-gap: 4rem;
-moz-column-rule: 1px solid $color-gray-light-2;
column-count: 2;
column-gap: 4rem;
column-rule: 1px solid $color-gray-light-2;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
#include respond(tab-port) {
-moz-column-count: 1;
column-count: 1;
}
}
//Popup open state
&:target {
visibility: visible;
opacity: 1;
}
&:target &__content {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
&__close {
&:visited,
&:link {
color: $color-gray-dark;
position: absolute;
top: 2.5rem;
right: 2.5rem;
font-size: 3rem;
text-decoration: none;
display: inline-block;
transition: all .3s;
line-height: 1;
}
&:hover {
color: $color-primary;
}
}
}

Answer 1

You are using popup__left width=33.33% and popup__img width=100% and the 100% of image is bigger then 33% of your screen. Try to set overflow:hidden on the popup__left (needs to define width and height).
If it doesn't work, try to set z-index:1 to left and z-index:0 to the right because that line is from the border of popup__text (column-rule: 1px solid $color-gray-light-2).