为什么我的CSS网格布局div不在大视口上？

Question

我正在尝试在父div内显示div，但希望子div位于中间而不是从父div的开头开始。下面给出了HTML / CSS以及它在iPad（看起来不错）和计算机（不是我想要的东西）上的外观的屏幕截图。

.inner-tile {
  display: inline-grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr ));
  grid-template-rows: 1fr;
  justify-items: center;

  width: 100%;
  height: auto;
  font-size: 18px;
  padding-bottom: 10px;
}

.event {
  border: 1px solid grey;
  border-radius: 4px;
  min-width: 240px;
  min-height: 270px;
  width: 90%;
  height: auto;
}

  <div class = "inner-tile">
    <div class = "event">
      <div class="event-image"></div>
      <a href = "#learnmore" class = "learn-more">event</a>
    </div>          
    <div class = "event">
      <div class="event-image"></div>
      <a href = "#learnmore" class = "learn-more">event</a>
    </div>          
    <div class = "event">
      <div class="event-image"></div>
      <a href = "#learnmore" class = "learn-more">event</a>
    </div>          
    <div class = "event">
      <div class="event-image"></div>
      <a href = "#learnmore" class = "learn-more">event</a>
    </div>          
  </div>

Answer 1

.inner-tile {
  display: grid;
  max-width: calc(240px * 4 + 5px * 3);
  margin: auto;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  justify-items: center;
  
  font-size: 18px;
  padding-bottom: 10px;
}

.event {
  border: 1px solid grey;
  border-radius: 4px;
  min-width: 240px; 
  min-height: 270px;
  width: 90%;
}

<div class="inner-tile">
  <div class="event">
    <div class="event-image"></div>
    <a href="#learnmore" class="learn-more">event</a>
  </div>
  <div class="event">
    <div class="event-image"></div>
    <a href="#learnmore" class="learn-more">event</a>
  </div>
  <div class="event">
    <div class="event-image"></div>
    <a href="#learnmore" class="learn-more">event</a>
  </div>
  <div class="event">
    <div class="event-image"></div>
    <a href="#learnmore" class="learn-more">event</a>
  </div>
</div>

Answer 2

Answer 3

Answer 4