html - 页眉中出现白色间隙，我不知道为什么

标头中有一个空白，即使我不希望它也可以使我的网站水平滚动。有人知道为什么吗？我只希望它是可以向上和向下滚动的一页。
我尝试了多种解决方案，例如将车体宽度设置为100％，并将overflow-x设置为隐藏，但似乎不起作用。

这是令人讨厌的白差距：
enter image description here

/* DROP DOWN MENU */

header ul li {
  font-family: backtoschool;
  position: relative;
  z-index: 1.5;
  list-style: none;
}

header ul li a {
  display: block;
  text-decoration: none;
  color: white;
}

header img {
  width: 200%;
}

.menu {
  margin: -8% 0% 0% -4%;
  width: 10%;
  text-align: center;
}


/* .menu {
			transition: 1s ease;
			}

			 .menu:hover {
			-webkit-transform: scale(1.1);
			-ms-transform: scale(1.1);
			transform: scale(1.1);
			transition: 0.5s ease;
			} */

header ul li ul {
  display: none;
  position: absolute;
  background-color: black;
  padding: 0%;
  border-radius: 10%;
  border-style: none;
  margin: -6% 0% 0% -3.5%;
}

header ul li:hover ul {
  display: block;
}

header ul li ul li {
  width: 100px;
}

header ul li ul li a {
  padding: 15%;
}

header ul li ul li a:hover {
  background: #696969;
  border-radius: 10%;
  border-style: none;
}


/*Social Media Icons*/

#socialmedia img {
  position: absolute;
  width: 8%;
  top: 0;
  right: 0;
}

.facebook {
  padding-right: 23%;
}

.twitter {
  padding-right: 13%;
}

.instagram {
  padding-right: 3%;
}

@keyframes bounce {
  0%,
  20%,
  60%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
}

#socialmedia img:hover {
  animation: bounce 1s;
}

@media only screen and (min-width: 700px) {
  .split-left {
    position: fixed;
    height: 100%;
    width: 50%;
    z-index: 1;
    top: 0;
    left: 0;
    background-image: url("file:///Users/Kavinda/Documents/Whammy/Web%20Development/Plain%20Background.png");
    background-size: 100%;
  }
  .characters {
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
    height: auto;
    width: 80%;
    z-index: 0.5;
  }
}

@media only screen and (max-width: 700px) {
  .split-left {
    position: absolute;
    height: 55vw;
    width: 100%;
    z-index: 1;
    background-image: url("file:///Users/Kavinda/Documents/Whammy/Web%20Development/Plain%20Background.png");
    background-size: 100% 100%;
    margin-top: -2%;
  }
  .characters {
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
    height: auto;
    width: 60%;
    z-index: 0.5;
    padding-top: 5vw;
  }
  .logo {
    width: 25%;
    padding-bottom: 1%;
    margin-top: 8%;
  }
}

@media only screen and (min-width: 700px) {
  .split-right {
    margin-left: 50%;
    width: calc(100%-50%);
    height: auto;
  }
}

@media only screen and (max-width: 700px) {
  .split-right {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 50%
  }
}

.centered {
  position: absolute;
  text-align: center;
  height: 100%;
}

.logo {
  width: 25%;
  padding-bottom: 1%;
}

@font-face {
  font-family: 'backtoschool';
  src: url('/Users/Kavinda/Documents/Whammy/Web Development/Back to School.ttf');
}

h1 {
  font-family: backtoschool;
}


/* Messenger x Gaming */

.catchphrase {
  font-size: 80%;
  margin-top: -5%;
}

.messenger {
  color: #3fa6d2;
}

.x {
  color: #e22c3c;
}

.gaming {
  color: #3fa6d2;
}


/* Coming Soon + GIF */

.soon {
  margin-left: auto;
  margin-right: auto;
  width: 20%;
  height: auto;
  padding-bottom: 2%;
  padding-top: 2%;
}

.gif {
  width: 70%;
  height: auto;
}

#aboutus {
  font-size: 115%;
  font-family: backtoschool;
  color: #3fa6d2;
}

.subtitle {
  padding-top: ;
}


/*WHAT IS WHAMMYCHAT?*/

.indchar {
  float: left;
  width: 50%;
  margin-left: -22%;
  margin-right: 5%;
}


/*SPECIAL DIMENSIONS FOR MOSSY BECAUSE SHE WAS TALL*/

.indcharmos {
  width: 45%;
  float: left;
  margin-left: -22%;
  margin-right: 10%;
}

.charname_gwendy {
  font-family: backtoschool;
  color: #12b6b3;
}

.charname_mossy {
  font-family: backtoschool;
  color: #64b495;
}

.charname_smokie {
  font-family: backtoschool;
  color: #f58252;
}

.chardes {
  float: right;
  margin-left: 15%;
  text-align: justify;
}

.subtitle {
  margin-top: 2vw;
}

.description {
  font-family: Helvetica;
  margin: 10%;
  line-height: 1.5;
  margin-top: 0%;
  margin-bottom: 0%;
  font-size: 95%;
}

.description h3 {
  padding-top: 5%;
  font-family: backtoschool
}

.skills {
  display: inline-block;
  width: 90%;
}

.skilltitle {
  font-family: backtoschool;
  color: #e22c3c;
  padding-top: 8%;
}


/*SLIDESHOW*/

* {
  box-sizing: border-box
}


/* Slideshow container */

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}


/* Hide the images by default */

.mySlides {
  display: none;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: black;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}


/* Position the "next button" to the right */

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}


/* Caption text */

.text {
  color: red font-size: 50%;
  position: relative;
  top: 0;
  width: 100%;
  text-align: center;
}


/* Number text (1/3 etc) */

.numbertext {
  color: black;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


/* The dots/bullets/indicators */

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: #717171;
}


/* Fading animation */

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

hr {
  border: 0 height: 1%;
  width: 90%;
  margin-top: 5%;
  margin-bottom: 5%;
}


/* NEWSLETTER */


/* Style the form element with a border around it */

form {
  border: 0px solid #f1f1f1;
}

form div h2 {
  font-family: backtoschool;
  color: #3fa6d2;
  font-size: 180%;
}

form div p {
  font-family: Helvetica;
  font-size: 95%;
  margin: 0% 5% 5% 7%;
  line-height: 1.5;
}

form div input {
  font-family: Helvetica;
}

.newsdetails {
  font-family: Helvetica;
  font-size: 95%;
}

input[type=checkbox] {
  margin: 5% 0% 0% 0%;
  font-family: Helvetica;
  font-size: 95%;
}


/* Style the input elements and the submit button */

.submit {
  width: 25%;
  margin-bottom: -7%;
}

.submit {
  transition: 1s ease;
}

.submit:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  transition: 0.5s ease;
}


/* FOOTER */

@media only screen and (min-width: 700px) {
  footer {
    width: 98%;
    height: auto;
    margin: -4% 1% 1.2% 1%;
    background-color: #3fa6d2;
    font-family: Helvetica;
    border-radius: 7px;
  }
  footer ul {
    list-style: none;
    display: inline-block;
    padding-right: 5%;
    font-size: 1.5vw;
  }
  footer .title {
    color: white;
    font-size: 1.5vw;
    font-family: backtoschool;
    text-decoration: underline;
  }
  footer ul li {
    color: white;
    font-size: 1vw;
    line-height: 1.5;
    text-decoration: none;
  }
  .contact {
    left: ;
  }
  .social {}
  .further {}
}

@media only screen and (max-width: 700px) {
  footer {
    width: 98%;
    height: 13;
    margin: -4% 0% 1.2% 1%;
    background-color: #3fa6d2;
    font-family: Helvetica;
    font-size: 80%;
    border-radius: 7px;
  }
  footer ul {
    list-style: none;
    margin-right: 8%;
    padding-top: 3%;
  }
  footer .title {
    color: white;
    font-size: 115%;
    font-family: backtoschool;
    text-decoration: underline;
  }
  footer ul li {
    color: white;
    line-height: 1.5;
    text-decoration: none;
    padding-bottom: 2%;
  }
}

footer ul li a {
  text-decoration: none;
  color: white;
}

footer ul li a:hover {
  text-decoration: underline;
}

<!doctype html>
<html>

<head>

  <title>Whammychat</title>

  <link href="main_20072018.css" rel="stylesheet" type="text/css" />

</head>


<body>


  <!-- LEFT -->

  <div class="split-left">
    <div class="centered">
      <img src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/Characters.png" class="characters">
      </img>
    </div>

    <header>
      <nav>
        <ul>
          <li>
            <a href="#" class="menu"><img src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/Button%20whammy%20website%20Menu.png"></a>
            <div class="arrowup">
              <ul>
                <li><a href="#aboutus">About Us</a></li>
                <li><a href="#newsletter">Newsletter</a></li>
                <li><a href="#">Press Kit</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>
          </li>
        </ul>


        <!-- Social Media Links -->

        <div id="socialmedia">

          <a href="https://www.facebook.com/whammychat/?ref=bookmarks" target="_blank"> <img src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/Social%20Media%20Icons/FB.png" class="facebook" alt="Facebook"></a>

          <a href="https://twitter.com/whammychat" target="_blank"> <img src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/Social%20Media%20Icons/Twitter.png" class="twitter" alt="Twitter"></a>

          <a href="https://www.instagram.com/whammychat/" target="_blank"> <img src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/Social%20Media%20Icons/Instagram.png" class="instagram" alt="Instagram"></a>

        </div>

      </nav>
    </header>
  </div>

  <!-- RIGHT -->

  <div class="split-right">
    <div class="centered">
      <img src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/New%20Logo%20-%20Social%20Media.png" class="logo"></img>
      <div class=catchphrase>
        <h1>
          <span class="messenger"> Messenger </span>
          <span class="x"> x </span>
          <span class="gaming"> Gaming </span>
        </h1>
      </div>


      <img src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/Coming_Soon.png" class="soon">
      <br>
      <img class="gif" src="https://whammychat.files.wordpress.com/2018/01/gif-6-website.gif" alt="Intro GIF
						" />


      <hr></hr>

      <h2><a id="aboutus">What is Whammychat?</a></h2>
      <div class="description">
        <p style="font-weight:bold">Simple: Battle your friends while chatting!</p>

        <p> In Whammychat, instant messaging meets gaming. Express yourself in an unprecedented way while chatting by battling your friends mid-chat. Whether you want to be a healer or bombard your enemies with target-seeking missiles, Whammychat offers you
          a variety of unique skills and characters to do so. Express yourself in an unprecedented way while chatting.</p>

        <h2><a id="aboutus">How it Works</a></h2>
        <h3 class="subtitle">1. Choose a Character</h3>
        <p>Select a character you want to play in the conversation.</p>

        <p class="chardes"> <img src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/Characters/ch_gwendy.png" class="indchar" /><span class="charname_gwendy">Gwendy</span> has magical powers. She can control elements around her such as fire and water to cash spells
          on enemies.</p>

        <p class="chardes"> <img src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/Characters/ch_mossy%20-%20Reflected.png" class="indcharmos" /><span class="charname_mossy">Mossy</span> is a healer. She can use fruits such as apples to heal and can summon any
          kind of creature to her aid.</p>

        <p class="chardes"> <img src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/Characters/ch_smokie%20-%20reflected.png" class="indchar" /><span class="charname_smokie">Smokie</span> is very powerful. He has a lot of explosive power packed in his belt such
          as missiles and fireballs.</p>

        <h3 class="subtitle">2. Start Chatting with your Friends</h3>
        <p> Send messages to your friends.</p>

        <img src="https://gph.is/2uFB9YB" style="width:100%" />


        <h3 class="subtitle">3. Use your Awesome Skills!</h3>

        <p> Start battling your friends while conversing.</p>

        <!-- Slideshow container -->
        <div class="slideshow-container">

          <!-- Full-width images with number and caption text -->
          <div class="mySlides fade">
            <div class="numbertext">1 / 3</div>
            <img src="https://whammychat.files.wordpress.com/2018/01/gif-6-website.gif" style="width:100%">
            <div class="text">Caption Text</div>
          </div>

          <div class="mySlides fade">
            <div class="numbertext">2 / 3</div>
            <img src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/Cover.png" style="width:100%">
            <div class="text">Caption Two</div>
          </div>

          <div class="mySlides fade">
            <div class="numbertext">3 / 3</div>
            <img src="https://whammychat.files.wordpress.com/2018/01/gif-6-website.gif" style="width:100%">
            <div class="text">Caption Three</div>
          </div>

          <!-- Next and previous buttons -->
          <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
          <a class="next" onclick="plusSlides(1)">&#10095;</a>
        </div>
        <br>

        <!-- The dots/circles -->
        <div style="text-align:center">
          <span class="dot" onclick="currentSlide(1)"></span>
          <span class="dot" onclick="currentSlide(2)"></span>
          <span class="dot" onclick="currentSlide(3)"></span>
        </div>



      </div>

      <hr></hr>

      <!-- NEWSLETTER START-->

      <form action="https://whammychat.us18.list-manage.com/subscribe/post?u=87245bd3ecc92795b3acf19b0&amp;id=5d33f134e3" target="_blank" method="post" novalidate>
        <div class="newstitle">
          <h2><a id="newsletter">Want to stay updated?</a></h2>
          <p>We hired a team of Koalas to write our newsletters. <br> They sleep 18 hours a day so, don't worry about spam! </p>
          <p> We just want to inform you when Whammychat is available and any other crazy things our team is up to.</p>
        </div>

        <div class="newsdetails" style="background-color:white">
          <input type="text" id="identity" placeholder="Nick Name" name="name">
          <input type="text" id="contact" placeholder="*E-mail" name="mail" required> <br>*Required
          <br> Do you agree with our newsletter policies? <input type="checkbox" checked="checked" name="subscribe">
        </div>
        <div class="newssubmit">
          <input type="image" name="submit" class="submit" src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/Subscribe%20Button.png" border="0" value="Subscribe" alt="Submit">
        </div>
      </form>

      <!-- NEWSLETTER END-->

      <hr></hr>


      <footer>
        <nav>

          <ul class="social">
            <li class="title">Social</li>
            <li><a href="https://www.facebook.com/whammychat/?ref=bookmarks">Facebook</a></li>
            <li><a href="https://twitter.com/whammychat">Twitter</a></li>
            <li><a href="https://www.instagram.com/whammychat/">Instagram</a></li>
          </ul>

          <ul class="contact">
            <li class="title">Contact</li>
            <li><a href="mailto:[email protected]">[email protected]</a></li>
            <li> [phone] </li>
            <li> Nuremberg, Germany </li>
          </ul>

          <ul class="further">
            <li class="title">Further Info</li>
            <li>Privacy Policy</li>
            <li>Terms & Conditions</li>
            <li>EULA</li>
          </ul>

        </nav>
      </footer>
    </div>
    <script src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/main.js">
    </script>
</body>

</html>

最佳答案

尝试：

body {
   margin: 0;
   padding: 0;
}

由于浏览器使用不同的默认样式表，因此有人建议使用重置样式表，例如Eric Meyer's Reset Reloaded。

如果不起作用，请使用该链接！

关于html - 页眉中出现白色间隙，我不知道为什么，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51473383/