为什么会出现溢出？

Question

当我添加 middle div（屏幕截图中的蓝色部分）时，会出现一个水平滚动条。

我已经尝试更改 divs 的 width，决定使用不同的度量单位。

玩过 position 个值，display 个值。

我是初学者，我不知道自己做错了什么。请帮助我:)

也许我的代码中的图片有问题？ Screenshot

body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: hsl(192, 100%, 9%);
  width: 100vw;
}

* {
  box-sizing: border-box;
}

h1,
h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

p {
  font-size: 18px;
}

button {
  font-family: 'Open Sans', sans-serif;
  ;
  font-weight: 700;
}


/* Header */
header {
  height: 100vh;
  width: 100%;
  background-image: url(./images/bg-hero-desktop.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: hsl(193, 100%, 96%);
}

.container {
  width: 85%;
  margin: 0 auto;
  padding-top: 3rem;
}

nav {
  display: flex;
  justify-content: space-between;
}

.nav-btn {
  font-family: inherit;
  width: 11rem;
  border-radius: 1.2rem;
  background-color: #fff;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  outline: none;
}

.main {
  display: flex;
  justify-content: space-between;
}

.main-text {
  margin-top: 8.5rem;
  width: 32rem;
}

.mockups {
  margin-top: 4rem;
  display: block;
  height: auto;
  width: 50%;
}

.main-btn {
  color: #fff;
  background-color: hsl(322, 100%, 66%);
  width: 14.5rem;
  height: 2.8rem;
  border: none;
  border-radius: 1.4rem;
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  margin: .2rem .4rem;
}

/* Middle */
.middle {
  width: 20%;
  height: 100px;
  background-color: blue;
}

<head>
  <meta charset="UTF-8">
  <title>Huddle</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>

<body>
  <header>
    <div class="container">
      <nav>
        <img class="logo" src="./images/logo.svg" alt="">
        <button class="nav-btn">Try It Free</button>
      </nav>
      <div class="main">
        <div class="main-text">
          <h1>Built The Community <br> Your Fans Will Love</h1>
          <p>Huddle re-imagines the way we build communities.
          You have a voice, but so does your audience. 
          Create connections with your users as engage in genuine discussion.</p>
          <button class="main-btn">Get Started For Free</button>
        </div>
        <img class="mockups" src="./images/illustration-mockups.svg" alt="">
      </div>
    </div>
  </header>
  <div class="middle">
    <div class="grow"></div>
    <div class="conv"></div>
    <div class="users"></div>
  </div>
</body>

Answer 1

只需从 body 的 CSS 中删除 width: 100vw;。

其他选项是在 body 上使用 overflow-x: hidden;。

更新

我认为水平滚动是因为有垂直滚动条，所以当你将 body 的宽度设置为 100vw 时会导致溢出。

考虑到这一点，您可以保留 width: 100vw;，只需设置 max-width: 100%。

body {
 margin: 0;
 font-family: 'Open Sans', sans-serif;
 font-size: 18px;
 font-weight: 400;
 color: hsl(192, 100%, 9%);
}

* {
 box-sizing: border-box;
}

h1, h2 {
 font-family: 'Poppins', sans-serif;
 font-weight: 600;
}

p {
 font-size: 18px;
}

button {
 font-family: 'Open Sans', sans-serif;;
 font-weight: 700;
}

/* Header */

header {
 height: 100vh;
 width: 100%;
 background-image: url(./images/bg-hero-desktop.svg);
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
 background-color: hsl(193, 100%, 96%);
}

.container { 
 width: 85%;
 margin: 0 auto;
 padding-top: 3rem;
}

nav {
 display: flex;
 justify-content: space-between;
}

.nav-btn {
 font-family: inherit;
 width: 11rem;
 border-radius: 1.2rem;
 background-color: #fff;
 border: none;
 box-shadow: 0 1px 3px rgba(0,0,0,0.3);
 outline: none;
}

.main {
 display: flex;
 justify-content: space-between;
}

.main-text {
 margin-top: 8.5rem;
 width: 32rem;

}

.mockups {
 margin-top: 4rem;
 display: block;
 height: auto;
 width: 50%;
}

.main-btn {
 color: #fff;
 background-color: hsl(322, 100%, 66%);
 width: 14.5rem;
 height: 2.8rem;
 border: none;
 border-radius: 1.4rem;
 outline: none;
 box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 margin: .2rem .4rem;
}

/* Middle */

.middle {
 width: 20%;
 height: 100px;
 background-color: blue;
}

<html>
<head>
 <meta charset="UTF-8">
 <title>Huddle</title>
 <link rel="stylesheet" href="styles.css">
 <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

</head>
<body>
 <header>
  <div class="container">
   <nav>
    <img class="logo" src="./images/logo.svg" alt="">
    <button class="nav-btn">Try It Free</button>
   </nav>
   <div class="main">
    <div class="main-text">
     <h1>Built The Community <br> Your Fans Will Love</h1>
     <p>Huddle re-imagines the way we build communities. You have a voice, but so does your audience. Create connections with your users as engage in genuine discussion.</p>
     <button class="main-btn">Get Started For Free</button>
    </div>
    <img class="mockups" src="./images/illustration-mockups.svg" alt="">
   </div>
  </div>
 </header>
 <div class="middle">
  <div class="grow"></div>
  <div class="conv"></div>
  <div class="users"></div>

 </div>

</body>
</html>

Answer 2

将此添加到 css

   body {
     overflow-x: hidden;
    }

为什么会出现溢出？

Why does overflow appears?

html

css

positioning

overflow