Why is there a gap next to my CSS grid layout on some browsers?

Question

I'm trying to use grids to display my pictures and make them cover the whole page while not changing aspect ratio. But when I open my page on Firefox or Chrome there's a huge gap on the right side.

Disposition in VSC browser

Disposition in Firefox or Chrome

I tried :

• setting margin: 0; in body
• setting height, width, max-width in html and body
• setting width: 100%; in container

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 350px 350px;
  gap: 2em;
  padding: 1em;
}

.photo {
  max-width: 100%;
  max-width: 100%;
  object-fit: cover;
}

<div class="container">
  <div>
    <img class="photo" src="Japon_content/000001_minia.jpeg">
  </div>

  <div>
    <img class="photo" src="Japon_content/000002_minia.jpg">
  </div>
</div>

Answer 1

No, the gap is correct...

.container {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  grid-template-rows    : 350px 350px;
  gap                   : 2em;
  padding               : 1em;
  }
.container div {             /* added to show real */
  background-color : yellow; /* grid element size  */
  }
.photo {
  max-width  : 100%;
  object-fit : cover;
  }

<div class="container">
  <div>
    <img class="photo" src="https://picsum.photos/350/350?random=1">
  </div>
  
  <div>
    <img class="photo" src="https://picsum.photos/350/350?random=2">
  </div>
</div>

Answer 2

I fixed this by applying these styles to the photo class:

.photo {
    width: 100%; 
    max-height: 100%;
    object-fit: cover;
}