为何部分浏览器中CSS Grid布局右侧存在间隙？

我尝试用CSS Grid展示图片，要求铺满页面且不改变图片比例，但在Firefox和Chrome浏览器中页面右侧出现巨大间隙。

已尝试的解决方法 #

• 为body设置margin: 0;
• 为html和body设置height, width, max-width属性
• 为容器设置width: 100%;

相关代码 #

CSS代码 #

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

HTML代码 #

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

附截图 #

• VSC浏览器中的布局
  
• Firefox或Chrome中的布局
  

内容的提问来源于stack exchange，提问作者Shiny_Wil