我想您遇到的问题是max-width:900px介质的问题吧？
.main-sidebar中的min-height: 100%导致问题，您可以改为给予height:100%和overflow: unset。

我得到的问题是在移动的分辨率。对于移动@media (max-width:900px) {}
问题出在类.main-sidebar中，您在该类中设置了min-height: 100%;属性
可以使用height属性，临时解决也可以使用min-height: 60%;
此外，无论何时我们写CSS代码，它应该在适当的结构。我们应该定义高度和宽度的块元素和块元素CSS代码应该写在层次结构，以便调试变得容易。

我冒昧地更正了你的代码，删除了所有多余的部分，并添加了另一个断点。我希望这能解决你的问题。
抱歉，我不得不使用一些随机图像，因为我没有访问您的资产文件夹。

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap");
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
  padding: 20px 5rem;
  font-family: "Inter", sans-serif;
}
ol, ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
:root {
  --Offwhite: hsl(36, 100%, 99%);
  --Grayishblue: hsl(233, 8%, 79%);
  --DarkGrayishBlue: hsl(236, 13%, 42%);
  --VeryDarkBlue: hsl(240, 100%, 5%);
  --SoftOrange: hsl(35, 77%, 62%);
  --SoftRed: hsl(5, 85%, 63%);
  --gap: 1.875rem;
  --pad: 2rem;
}
.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gap);
}
.navbar-list {
  display: flex;
  justify-content: space-between;
  gap: 2.5rem;
}
.navbar-link {
  text-decoration: none;
  color: var(--DarkGrayishBlue);
}
.main-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  grid-template-areas: 
    "main-image main-image main-sidebar"
    "main-bottom main-bottom main-sidebar"
    "box-container box-container box-container"
  ;
}
.main-image {
  grid-area: main-image;
  background-image: url(//unsplash.it/800/800);
  background-size: cover;
  background-position: center;
  height: 18.75rem;
}
.main-bottom {
  grid-area: main-bottom;
  display: grid; 
  gap: var(--gap); 
  grid-template-columns: 1fr 1fr;
}
.main-bottom-first-container h1 {
  font-size: 3.4375rem;
  font-weight: 800;
  color: var(--VeryDarkBlue);
}
.main-bottom-second-container p {
  color: var(--DarkGrayishBlue);
  font-size: 1rem;
  line-height: 1.5625rem;
  margin-bottom: var(--gap);
}
.main-bottom-second-container button {
  text-transform: uppercase;
  letter-spacing: 0.3125rem;
  font-weight: 700;
  color: var(--Offwhite);
  background-color: hsl(5, 85%, 63%);
  padding: 0.9375rem var(--gap);
  border: none;
}
.main-sidebar {
  grid-area: main-sidebar;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  background-color: var(--VeryDarkBlue);
  padding: var(--pad);
}
.main-sidebar h2 {
  color: hsl(35, 77%, 62%);
  font-size: 2.8125rem;
  font-weight: 700;
}
.main-sidebar-container:not(:last-child) {
  padding-bottom: var(--gap);
  border-bottom: solid 1px var(--DarkGrayishBlue);
}
.main-sidebar-container-header {
  color: var(--Offwhite);
  font-weight: 700;
  font-size: 1.25rem;
}
.main-sidebar-container-description {
  color: var(--Grayishblue);
  line-height: 1.5625rem;
}
.left_box_container {
  grid-area: box-container;
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gap);
}
.__box {
  display: flex;
  flex-direction: column;
  gap: 0rem;
 }
.box_image {
  height: 6.25rem; 
  max-width: 100%;
}
.box_container {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: var(--pad);
}
.box_number {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--Grayishblue);
}
.box_header {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--VeryDarkBlue);
}
.box_description {
  color: var(--DarkGrayishBlue);
  font-size: 0.9375rem;
  line-height: 1.5625rem;
}
#box_first_image {
  background-image: url(//unsplash.it/400/399);
  background-size: cover;
  background-position: center;
}
#box_second_image {
  background-image: url(//unsplash.it/400/400);
  background-size: cover;
  background-position: center;
}
#box_third_image {
  background-image: url(//unsplash.it/400/401);
  background-size: cover;
  background-position: center;
}
.attribution {
  display: none;
  margin: var(--gap) 0;
}

/* Actives */
.navbar-link:hover {
  color: var(--SoftRed);
}
.main-sidebar-container-header:hover {
  cursor: pointer;
  color: var(--SoftOrange);
}
.main-bottom-second-container > button:hover {
  cursor: pointer;
  color: white;
  background-color: black;
}
.box_header:hover {
  cursor: pointer;
  color: var(--SoftRed);
}

/* Tablet */
@media (max-width: 1045px) {
  body {
    padding: 20px;
  }
  #logo {
    transform: scale(0.9);
  }
  .main-wrapper {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
      "main-image main-image"
      "main-bottom main-bottom"
      "main-sidebar box-container"
      "main-sidebar box-container";
    }
  .main-sidebar {
    align-self: start;;
  }
  .left_box_container {
    grid-template-columns: 1fr;
  }
}

/* Phone */
@media (max-width: 700px) {
  .navbar {
    flex-direction: column;
    gap: var(--gap);
  }
  .navbar-list {
    gap: 1rem;
  }
  .main-wrapper {
    grid-template-columns: 1fr;
    grid-template-areas: 
      "main-image"
      "main-bottom"
      "main-sidebar"
      "box-container";
    }
  .main-bottom {
    grid-template-columns: 1fr;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- displays site properly based on user's device -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
  <link rel="stylesheet" href="test.css" type="text/css">

  <title>Frontend Mentor | News homepage</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
  <style>
    .attribution {
      font-size: 11px;
      text-align: center;
    }

    .attribution a {
      color: hsl(228, 45%, 44%);
    }
  </style>
</head>

<body>
  <nav class="navbar">
    <img src="//unsplash.it/75/75" alt="logo" id="logo">
    <ul class="navbar-list">
      <li><a href="#" class="navbar-link">Home</a></li>
      <li><a href="#" class="navbar-link">New</a></li>
      <li><a href="#" class="navbar-link">Popular</a></li>
      <li><a href="#" class="navbar-link">Trending</a></li>
      <li><a href="#" class="navbar-link">Categories</a></li>
    </ul>
  </nav>

  <main class="main-wrapper">
    <div class="main-image"></div>
    <div class="main-bottom">
      <div class="main-bottom-first-container">
        <h1>The Bright Future of Web 3.0?</h1>
      </div>
      <div class="main-bottom-second-container">
        <p>We dive into the next evolution of the web that claims to put the power of the platforms back into the
          hands of the people. But is it really fulfilling its promise?</p>
        <button>Read more</button>
      </div>
    </div>
    <aside class="main-sidebar">
      <h2>New</h2>
      <div class="main-sidebar-container">
        <h3 class="main-sidebar-container-header">Hydrogen VS Electric Cars</h3>
        <p class="main-sidebar-container-description">Will hydrogen-fueled cars ever catch up to EVs?</p>
      </div>
      <div class="main-sidebar-container">
        <h3 class="main-sidebar-container-header">The Downsides of AI Artistry</h3>
        <p class="main-sidebar-container-description">What are the possible adverse effects of on-demand AI image
          generation?</p>
      </div>
      <div class="main-sidebar-container">
        <h3 class="main-sidebar-container-header">Is VC Funding Drying Up?</h3>
        <p class="main-sidebar-container-description">Private funding by VC firms is down 50% YOY. We take a look at
          what that means.</p>
      </div>
    </aside>
    <div class="left_box_container">
      <div class="__box">
        <div class="box_image" id="box_first_image"></div>
        <div class="box_container">
          <div class="box_number">01</div>
          <div class="box_header">Reviving Retro PCs</div>
          <div class="box_description">What happens when old PCs are given modern upgrades?</div>
        </div>
      </div>
      <div class="__box">
        <div class="box_image" id="box_second_image"></div>
        <div class="box_container">
          <div class="box_number">02</div>
          <div class="box_header">Top 10 Laptops of 2022</div>
          <div class="box_description">Our best picks for various needs and budgets.</div>
        </div>
      </div>
    <div class="__box">
      <div class="box_image" id="box_third_image"></div>
      <div class="box_container">
        <div class="box_number">03</div>
        <div class="box_header">The Growth of Gaming</div>
        <div class="box_description">How the pandemic has sparked fresh opportunities.</div>
      </div>
    </div>
    </div>
  </main>
  <footer class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
    Coded by <a href="#">Your Name Here</a>.
  </footer>
</body>

</html>