仅在浏览器中的水平滚动条？

Question

TLDR：文档似乎只在 Mozilla 开发工具之外拉出一个水平滚动条。

Web 开发新手，设计方面非常有趣，但我很难解决响应问题。在这个特定的文档中，我似乎只在浏览器中运行文档时得到一个水平滚动条（在 chrome 和 firefox 开发者版中测试）。一旦在具有特定高度和宽度的 Firefox 开发者版的响应部分中运行，它似乎直到宽度 1330 才获得滚动条。我最初认为问题是由于图像文件的大小，但它似乎是更深层次的东西。我的目标是让此部分占用页面上的所有可用空间，但据我了解，水平滚动条意味着某处有内容溢出，我不确定如何更正。

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --transition-duration: 0.3s;
  --font-size-title: calc(2rem + 2vw);
}

html {
  --color-primary: hsl(274, 99%, 72%);
  --color-primary-m: rgb(241, 172, 255);
  --color-secondary: hsl(274, 99%, 72%, 0.6);
  --color-secondary-m: rgba(207, 56, 200, 0.815);
  --color-secondary-m-dark: purple;
  --color-quaternary: rgb(0, 0, 255);
  --color-tertiary: #f6eedf;
  --color-tertiary-m-light: hsla(39, 56%, 92%, 0.55);
}

p {
  color: white;
  font-size: calc(1rem + 1vw);
  font-weight: 200;
}

a:link,
a:visited {
  color: var(--color-quaternary);
  text-decoration: none;
  font-size: calc(0.5rem + 1vw);
  padding: 1rem 2rem;
  border-radius: 0.3rem;
  position: relative;
  transition: all var(--transition-duration) cubic-bezier(1, 0, 0, 1);
  z-index: 1;
}

.container {
  display: grid;
  line-height: 1.7;
  width: 100vw;
}

li {
  list-style: none;
  margin-bottom: 4rem;
}

.header-main-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 6;
}

.header-main-nav input[type="checkbox"] {
  position: absolute;
  top: 3rem;
  left: 3rem;
  height: 4rem;
  width: 4rem;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.header-main-nav-hamburger {
  position: absolute;
  top: 3rem;
  left: 3rem;
  height: 4rem;
  width: 4rem;
  padding: 1rem;
  background-color: var(--color-tertiary);
  z-index: 2;
  display: grid;
  display: flex;
  place-items: center;
  animation: main-nav 2s;
}

@keyframes main-nav {
  0% {
    transform: translateX(150rem) rotate(1000deg);
    opacity: 0%;
  }
  100% {
    transform: translateX(0) rotate(0);
    opacity: 1;
  }
}

.header-main-nav-hamburger>div {
  position: relative;
  height: 0.3rem;
  width: 100%;
  background-color: var(--color-secondary);
  display: grid;
  transition: var(--transition-duration) ease-in-out;
}

.header-main-nav-hamburger>div::before,
.header-main-nav-hamburger>div::after {
  content: '';
  position: absolute;
  top: -1rem;
  width: 60%;
  height: inherit;
  background-color: inherit;
  z-index: 2;
}

.header-main-nav-hamburger>div::before {
  left: 0;
}

.header-main-nav-hamburger>div::after {
  top: 1rem;
  right: 0;
}

.header-main-nav input[type=checkbox]:checked+.header-main-nav-hamburger>div {
  transform: rotate(135deg);
}

.header-main-nav input[type=checkbox]:checked+.header-main-nav-hamburger>div::before {
  left: 0;
  top: 0;
  width: 100%;
  transform: rotate(270deg);
}

.header-main-nav input[type=checkbox]:checked+.header-main-nav-hamburger>div::after {
  opacity: 0;
}

.header-main-nav input[type=checkbox]:checked:hover+.header-main-nav-hamburger>div {
  transform: rotate(405deg);
}

.header-main-nav-menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  visibility: hidden;
  display: grid;
  place-items: center;
}

.header-main-nav-menu>div {
  background-color: var(--color-secondary-m-dark);
  height: 200%;
  width: 200%;
  display: grid;
  place-items: center;
  transform: scaleX(0);
  transition: all 0.5s ease-in-out;
  opacity: 70%;
}

.header-main-nav-menu>div>div {
  text-align: center;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
  overflow: hidden;
}

.header-main-nav input[type=checkbox]:checked~.header-main-nav-menu {
  visibility: visible;
}

.header-main-nav input[type=checkbox]:checked~.header-main-nav-menu>div {
  transform: scaleX(1);
}

.header-main-nav-menu ul li a:link,
.header-main-nav-menu ul li a:visited {
  z-index: 5;
  font-size: 1.5rem;
  position: relative;
}

.header-main-nav-menu ul li a:link::before,
.header-main-nav-menu ul li a:visited::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  transform: scaleY(0);
  background-color: var(--color-tertiary-m-light);
  transition: transform var(--transition-duration) ease-in-out;
}

.header-main-nav-menu ul li a:hover::before,
.header-main-nav-menu ul li a:active:before {
  transform: scaleY(1)
}

section#whytho {
  background-color: var(--color-primary);
  grid-column: container-start / container-end;
  padding: 10vh 3vw;
  display: grid;
  display: flex;
  overflow: hidden;
  flex-wrap: wrap;
}

.whytho-content {
  display: flex;
  flex-direction: column;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}

.whytho-content-title {
  font-size: var(--font-size-title);
  padding: 0 2rem 1rem;
  font-weight: 300;
  color: white;
  text-transform: uppercase;
  margin-bottom: 2rem;
  position: relative;
}

.whytho-content-title:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 45%;
  height: 0.2rem;
  width: 10%;
  background-color: white;
}

.whytho-content-para {
  color: var(--color-tertiary);
}

.whytho-content img {
  align-self: center;
  height: 70vh;
  width: 70vh;
  object-fit: initial;
}

@media screen and (max-width: 1000px) {
  a:link,
  a:visited {
    font-size: calc(1rem + 1vw);
  }
  section#whytho {
    width: 100vw;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>site</title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="style.css" />
</head>

<body class="container">
  <main>
    <header id="home">
      <!--Nav-->
      <nav class="header-main-nav">
        <input type="checkbox" />
        <div class="header-main-nav-hamburger">
          <div></div>
        </div>
        <div class="header-main-nav-menu">
          <div>
            <div>
              <ul>
                <li><a href="#">L1</a></li>
                <li><a href="#">L2</a></li>
                <li><a href="#">L3</a></li>
                <li><a href="#">L4</a></li>
                <li><a href="#">L5</a></li>
                <li><a href="#">L6</a></li>
              </ul>
            </div>
          </div>
        </div>
      </nav>

      <section id="whytho">
        <div class="whytho-content">
          <img src="pics/image.jpg" id="img">
          <p class="whytho-content-para">(Image caption) (Colorized 2020.)</p>
          <h2 class="whytho-content-title">But, why a website?</h2>
          <p class="whytho-content-para">Websites bad</p>
          <p class="whytho-content-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </section>
  </main>
</body>

</html>

Answer 1

.container {
      display: grid;
      line-height: 1.7;
      width: 100vw;
    } 

/* Because of this width horizontal scroll bar is appear. You can either delete this property or write like this - */

.container {
      ​display: grid;
      ​line-height: 1.7;
      ​ width: 100%;
   ​} 

/* or Use this- */

body {
  overflow-x: hidden;
   }