当屏幕较小时，组件不居中

Question

我正在制作一个网站，该网站必须兼容所有设备（笔记本电脑，平板电脑，电话），并且在较小的屏幕上似乎无法使我的天气API组件变得更小。我主要是在尝试用宽度支柱进行调整，在这里我一直在使用％。我还注意到，当我更多地减小宽度时，我的很多组件都会在左侧消失。

我已经尝试过：

• 在我的代码中到处检查边距，填充和差距，
• 将小部件放在父级（并居中 +调整大小）
• 宽度中，以％的宽度，最大范围
• 减少/删除填充和差距以及其他Div的

外观。所有设备：

平板电脑视图：

let date_now;
let icon_now;
let cmt_now;
let temp_now;
let wind_now;

let day0_icon;
let day0_day;
let day0_cmt;
let day0_max;
let day0_min;

let day1_icon;
let day1_day;
let day1_cmt;
let day1_max;
let day1_min;

let day2_icon;
let day2_day;
let day2_cmt;
let day2_max;
let day2_min;

let day3_icon;
let day3_day;
let day3_cmt;
let day3_max;
let day3_min;

let loading;

let weather = async() => {
  loading = false;

  let data = await fetch(
    `https://weatherdbi.herokuapp.com/data/weather/oslo`
  );

  let json = await data.json();

  date_now = json.currentConditions.dayhour;
  icon_now = json.currentConditions.iconURL;
  cmt_now = json.currentConditions.comment;
  temp_now = json.currentConditions.temp.c;
  wind_now = json.currentConditions.wind.km;

  day0_icon = json.next_days[1].iconURL;
  day0_day = json.next_days[1].day;
  day0_cmt = json.next_days[1].comment;
  day0_max = json.next_days[1].max_temp.c;
  day0_min = json.next_days[1].min_temp.c;

  day1_icon = json.next_days[2].iconURL;
  day1_day = json.next_days[2].day;
  day1_cmt = json.next_days[2].comment;
  day1_max = json.next_days[2].max_temp.c;
  day1_min = json.next_days[2].min_temp.c;

  day2_icon = json.next_days[3].iconURL;
  day2_day = json.next_days[3].day;
  day2_cmt = json.next_days[3].comment;
  day2_max = json.next_days[3].max_temp.c;
  day2_min = json.next_days[3].min_temp.c;

  day3_icon = json.next_days[4].iconURL;
  day3_day = json.next_days[4].day;
  day3_cmt = json.next_days[4].comment;
  day3_max = json.next_days[4].max_temp.c;
  day3_min = json.next_days[4].min_temp.c;

  loading = true;
};

weather();

.widget {
  display: flex;
  flex-direction: row;
  justify-content: center;
  place-items: center;
  width: 100%;
}

.lane {
  padding: 2rem;
  text-align: center;
}

.conditions {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lane2 {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

.icon {
  width: 8rem;
}

.temp-high {
  color: red;
}

.temp-low {
  color: lightskyblue;
}

.loading {
  text-align: center;
  font-size: 2.5rem;
}


/* =================== MEDIA (medium devices) =================== */

@media screen and (max-width: 1024px) {
  .widget {
    width: 50%;
  }
}


/* =================== MEDIA (small devices) =================== */

@media screen and (max-width: 600px) {}

<section id="Weather">
  <h1>Weather in Oslo</h1>
  <p>Is it time to skate?</p>
  <div class="widget">
    {#if loading}
    <div class="lane">
      <h1>{date_now}</h1>
      <div class="lane2">
        <div class="icon">
          <img src={icon_now} alt="icon" class="icon" />
          <p>{cmt_now}</p>
        </div>
        <div class="conditions">
          <h2>{temp_now} &#176;C</h2>
          <p>&#128168; {(wind_now / 3.6).toFixed(1)} m/s</p>
        </div>
      </div>
    </div>
    <div class="lane">
      <h1>{day0_day}</h1>
      <div class="info">
        <img src={day0_icon} alt="icon" class="icon" />
        <p>{day0_cmt}</p>
        <p class="temp-high">{day0_max} &#176;C</p>
        <p class="temp-low">{day0_min} &#176;C</p>
      </div>
    </div>
    <div class="lane">
      <h1>{day1_day}</h1>
      <div class="info">
        <img src={day1_icon} alt="icon" class="icon" />
        <p>{day1_cmt}</p>
        <p class="temp-high">{day1_max} &#176;C</p>
        <p class="temp-low">{day1_min} &#176;C</p>
      </div>
    </div>
    <div class="lane">
      <h1>{day2_day}</h1>
      <div class="info">
        <img src={day2_icon} alt="icon" class="icon" />
        <p>{day2_cmt}</p>
        <p class="temp-high">{day2_max} &#176;C</p>
        <p class="temp-low">{day2_min} &#176;C</p>
      </div>
    </div>
    <div class="lane">
      <h1>{day3_day}</h1>
      <div class="info">
        <img src={day3_icon} alt="icon" class="icon" />
        <p>{day3_cmt}</p>
        <p class="temp-high">{day3_max} &#176;C</p>
        <p class="temp-low">{day3_min} &#176;C</p>
      </div>
    </div>
    {:else}
    <p class="loading">Loading...</p>
    {/if}
  </div>
</section>