背景效果仅在屏幕的一半

如何解决背景效果仅在屏幕的一半

Hele，我有一个问题：DD 我有背景效果，我添加了信息框，效果只在屏幕的一半上，我不知道问题出在哪里......当我简单地删除 CSS 时，问题就消失了#2

HTML

<div class="parallax"></div>
    <header style="text-shadow: black 2px 2px;">
        <h1>Detail Software</h1>
        <p>Sense for detail.</p>
    </header>
    </div>

    <section class="wrapper">
        <div id="stars"></div>
            <div id="stars2"></div>
            <div id="stars3"></div>
            <div id="title"></div>
    </section>
        
    <section>
        <div class="container">
          <div class="left"></div>
          <div class="right">
            <div class="content">
              <h1>This is a heading</h1>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia assumenda dolore reprehenderit ullam blanditiis ex sapiente pariatur tempore incidunt facilis?</p>
              <a href="#" class="btn">Click Me</a>
            </div>
          </div>
        </div>
      </section>

CSS #1

@import url(https://fonts.googleapis.com/css?family=Special+Elite);
html{
    height: 100%;
    overflow: hidden;
}
body{
    color: #fff;
    margin: 0;
    padding: 0;
    perspective: 1px;
    transform-style: preserve-3d;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    font-family:  'Special Elite',cursive;
    
}
header{
    Box-sizing: border-Box;
    min-height: 100vh;
    padding: 30vw 0 5vw;
    position: relative;
    transform-style: inherit;
    width:  100vw;
    text-align: center;
    text-shadow: black 10px;
}
header h1{
    margin-top: -180px;
    margin-bottom: -50px;
    font-size: 54px;
    
}
header p{
    
    font-size: 30px;
    text-shadow: black 15px;
}
header,header:before{
    background: 50% 50% / cover;
}

.parallax {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    background-image: url(obrazky/1.jpg);
    background-size: cover;
    z-index: -1;
    min-height: 100vh;
    border-bottom: solid grey 2px;
    Box-shadow: black 0px 3px
}
header * {
    font-weight: normal;
    letter-spacing:  0.2em;
    text-align: center;
    margin: 0;
    padding: 1em 0;
    
}

CSS #2

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap");
* {
  padding: 0;
  margin: 0;
  Box-sizing: border-Box;
}
html {
  font-family: "Montserrat";
}
section {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  
}
.container {
  width: 90%;
  max-width: 1000px;
  margin: 50px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: aqua; */
}
.left {
  width: 50%;
  height: 600px;
  background: url(https://images.unsplash.com/photo-1542662565-7e4b66bae529?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=564&q=80)
    no-repeat center / cover;
  border-radius: 8px;
}
.right {
  width: 50%;
  min-height: 400px;
  background-color: #2f3d3c;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  border-radius: 8px;
  color: white;
  margin-left: -150px;
}
.right h1 {
  font-size: 40px;
  font-weight: lighter;
}
.right p {
  margin: 20px 0;
  font-weight: 500;
  line-height: 25px;
}
.right a {
  text-decoration: none;
  text-transform: uppercase;
  background-color: white;
  color: black;
  padding: 20px 30px;
  display: inline-block;
  letter-spacing: 2px;
}

@media only screen and (max-width: 768px) {
  .container {
    flex-direction: column;
    width: 100%;
    margin: 0 20px;
  }
  .left {
    width: 100%;
    height: 400px;
  }
  .right {
    width: 90%;
    margin: 0;
    margin-top: -100px;
  }
}

CSS#3

我添加链接beaucase它唯一的数字效果... https://pastebin.com/mTPRqdNw