水平滚动条只在浏览器中？

Question

TLDR：文档似乎只在 Mozilla Dev Tools 之外拉起水平滚动条。

Web 开发的新手，设计方面非常有趣，但我很难解决响应问题。在这个特定的文档中，我似乎只在浏览器中运行浏览文档时得到一个水平滚动条（在 chrome 和 firefox 开发者版中测试）。一旦运行在具有特定高度和宽度的 Firefox Developer Edition 的响应部分中，它似乎直到宽度 1330 才获得滚动条。我最初认为问题是由于图像文件大小引起的，但它似乎更深层次。我的目12=]

*,
*::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;
   }

水平滚动条只在浏览器中？

Horizontal Scroll Bar only in Browser?

html

css

scrollbar