您的问题是使 Package 器的宽度设置为：min-width: 1720px;设置这个最小宽度，你是在告诉元素它必须那么大，这在移动的上看起来很奇怪，因为那些屏幕并没有那么大。
有很多很容易的修复方法，但是这里有一个简单的例子，它可以稍微简化你的代码，并提供你想要的响应能力：

.container {
  width: 100%;
  margin: 0 auto;
}

.wrapper {
  /* not actually needed */
}

.main__content{
  padding-left:40px;
  padding-right:40px;
}

而HTML

<div class="wrapper">
  <section class="section">
    <div class="container">
      <div class="main__content">
        <h1>Content</h1>
        <p>Content</p>
        <p>Content</p>
      </div>
    </div>
  </section>
</div>

您在评论中指出，您有一个“白色”区域显示在div周围。要修复这样的项目并保持背景颜色一致，您需要为容纳页面的区域（即body）设置样式以获得您想要的外观。
例如，将此添加到body元素将使整个背景变为蓝色：

body {
  background: blue;
  /* to make text legible */
  color: white; 
}

wrapper类将min-width属性设置为1720px，这表明您的内容不能低于该宽度，这使得水平滚动条出现在较低分辨率的屏幕中。
您可能希望为min-width选择一个较小的值

.wrapper {
  min-width: 340px;
}

这个问题与你的min-width属性有关。如果你把它改成一个同样值的max-width属性，滚动条就会消失。

.wrapper {
    max-width: 1720px;
}

在此之后，您仍然可以尝试一些事情，例如添加min-width属性，但使用较低的值。
但这仍然只能在PC上工作，而不是在所有屏幕上。这就是为什么你需要让你的网站响应。最简单的方法是使用媒体查询，在那里你定义不同的CSS代码，你想在2或3个不同的屏幕尺寸上运行。
我不知道你希望你的网站最终看起来怎么样，所以我建议你在YouTube上看一两个关于响应式设计的视频，这应该会对你的努力有所帮助。