我的移动网站上有溢出

Question

在我的 pc 模式网站上，布局完美，在所有小屏幕设备上也完美，但我有一个问题，右侧有很多空白黑色 space在我开始在较小的屏幕设备上滚动后，那里也没有内容，但是如果我一直滚动到左边，一切都很完美，因为我已经使用媒体查询对其进行了调整。谁能告诉我如何摆脱空白 space 并使内容适合屏幕？

这是我的代码：

*PLAYER PAGE*/
.container {
  padding: 2.5em 1.25em 0;
  margin: 0 auto;
  border-bottom: 0.125em solid rgb(105, 105, 105);
  border-width: 100%;
  padding-bottom: 1.25em;
}
h1 {
  margin: 0;
  text-align: center;
  font-size: 3.125em;
  overflow: hidden;
  line-height: 1;
  color: white;
}
h1 span {
  display: block;
  animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}

.meet-the-owner h3 {
  text-align: center;
  color: rgb(255, 215, 0);
  font-size: 1.5625em;
  font-family: "BatmanForeverAlternate";
}
.meet-the-owner-top h3 {
  text-align: center;
  color: rgb(255, 215, 0);
  font-size: 1.5625em;
  font-family: "BatmanForeverAlternate";
  padding: 2.5em;
}

.luxxreno {
  text-align: left;
  position: relative;
  left: 25em;
  padding-top: 5em;
  bottom: 9.375em;
  width: 100%;
}

.luxxreno img {
  border-radius: 50%;
  width: 39.5em;
  padding-bottom: 0.625em;
  position: relative;
  top: 3em;
}

.meet-the-owner {
  padding: 3.125em;
  border-top: 0.125em solid rgb(105, 105, 105);
}
.q-l {
  color: white;
  display: inline-block;
  flex: right;
  text-align: left;
  position: relative;
  left: 18.75em;
  bottom: 0.625em;
  font-size: 1.3125em;
}

.questions p {
  padding: 0.625em;
  position: relative;
  top: 1.875em;
}
.luxx-name {
  font-family: "BatmanForeverAlternate";
  padding-bottom: 2.1875em;
  position: relative;
  left: 0.2em;
  font-size: 3.125em;
  top: 1.9em;
}

.owner {
  font-family: "BatmanForeverAlternate";
  position: relative;
  left: 0.4em;
  color: red;
}
.luxx-socials {
  position: relative;
  left: 0.5625em;
  top: 3.125em;
}
.luxx-socials ul li {
  padding: 0.625em 1.875em;
  position: relative;
  top: 15px;
  list-style-type: none;
  display: inline-block;
  right: 30px;
  font-family: "BatmanForeverAlternate";
  font-size: 25px;
  color: #ffd700;
  transition: 0.5s;
}
.luxx-socials ul li a {
  text-decoration: none;
}

.luxx-socials ul a li:hover {
  color: red;
}

@keyframes reveal {
  0% {
    transform: translate(0, 100%);
  }
  100% {
    transform: translate(0, 0);
  }
}
@media screen and (max-width: 1799px) {
  /*MEDIA FOR MENU BUTTON*/
  .nav-links ul li {
    display: block;
  }
  .nav-links {
    position: fixed;
    background: #ffd700;
    height: 100vh;
    width: 12.5em;
    top: 0;
    right: -200px;
    text-align: left;
    z-index: 2;
  }
  nav .fas {
    display: block;
    color: black;
    margin: 1.625em;
    font-size: 1.375em;
    cursor: pointer;
    position: relative;
    right: 0.6em;
  }
  .nav-links ul {
    padding: 1em;
  }
  .text-box h1 {
    font-size: 4.3em;
  }
  nav img {
    width: 20em;
    position: relative;
    top: 0.1em;
  }
  .player-info p {
    padding-left: 0;
    font-size: 0.8em;
    padding-top: 0;
  }
}
@media screen and (max-width: 2000px) {
  /*INDEX PAGE MEDIA */

  body {
    overflow-x: none;
  }

  nav img {
    position: relative;
    top: 0.2em;
  }
  nav .fas {
    position: relative;
    top: 0.2em;
  }
  .luxxreno img {
    width: 280px;
    position: relative;
    padding-left: 10px;
    right: 360px;
  }
  .meet-the-owner-top h3 {
    position: relative;
    right: 6px;
  }
  .container h1 {
    position: relative;
    right: 10px;
  }
  .questions {
    font-size: 13px;
    position: relative;
    right: 770px;
    top: 50px;
  }

  .luxx-socials ul {
    position: relative;
    right: 730px;
    top: 25px;
  }
  .luxx-socials ul li {
    font-size: 20px;
  }
  .luxx-name {
    font-size: 40px;
  }
}

@media screen and (min-width: 577px) and (max-width: 767px) {
  /*INDEX PAGE MEDIA */
  nav img {
    position: relative;
    top: 1.8em;
  }
  nav .fas {
    position: relative;
    top: 1.3em;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  /*INDEX PAGE MEDIA */
  nav img {
    position: relative;
    top: 1.8em;
  }
  nav .fas {
    position: relative;
    top: 1.3em;
  }
}

@media screen and (min-width: 992px) and (max-width: 1055px) {
  nav img {
    position: relative;
    top: 1.6em;
  }
  nav .fas {
    position: relative;
    top: 1.1em;
  }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
  nav img {
    position: relative;
    top: 1.5em;
  }
  nav .fas {
    position: relative;
    top: 1.1em;
  }
}

@media screen and (min-width: 1201px) and (max-width: 1400px) {
  nav img {
    position: relative;
    top: 1.3em;
  }
  nav .fas {
    position: relative;
    top: 1.1em;
  }
}

<html lang="en">
  <head>
    <script>
      ScrollReveal({ reset: true });
  </script>
    <script src="https://unpkg.com/scrollreveal"></script>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Players | LuxxMob</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Teko:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
    <script
      src="https://kit.fontawesome.com/360332bae9.js"
      crossorigin="anonymous"
    ></script>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;400;700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="menu-header">
      <nav>
        <a href="index.html"><img src="images/HD_FILE (2).png" /></a>
        <div class="nav-links" id="navLinks">
          <i class="fas fa-times" onclick="hideMenu()"></i>
          <ul>
            <li>
              <a href="index.html">Home</a>
            </li>
            <li>
              <a href="news.html">News</a>
            </li>
            <li>
              <a href="players.html">Players</a>
            </li>
            <li>
              <a href="partners.html">Partners</a>
            </li>
            <li>
              <a href="about-us.html">About Us</a>
            </li>
          </ul>
        </div>
        <i class="fas fa-bars" onclick="showMenu()"></i>
      </nav>
    </div>

    <!--END OF NAV-->

    <section class="player-bios">

      <div class="container">
        <h1>
            <span>Players</span>
        </h1>
    </div>

    <div class="meet-the-owner-top">

    <h3>Meet the Owner</h3>

  </div>

  <div class="luxxreno">

    <img src="images/luxx.jpg">
    <div class="q-l">
    <div class="questions">
      <h2 class="luxx-name">LUXX RENO</h2>
      <h2 class="owner">OWNER</h2>
      <p>Real Name: <b>Cory George</b></p>
      <p>Online Name: <b>Luxx Reno</b></p>
      <p>First Game Played as a Kid: <b>Duck Hunter/Super Nintendo</b></p>
      <p>Game I'm Best At: <b>Fortnite</b></p>
      <p>If You Were a Superhero, What Would Your Power Be?: <br><b>Mimicry, so I'd be able to mimic and super power I see.</b></p>
      <p>Favourite Artist of All Time: <b>Billy Raffoul</b></p>
      <p>Hidden Talents: <b>Won lots of medals for swimming!</b></p>
    </div>

  <div class="luxx-socials">
<ul>
    <a href="https://www.youtube.com/channel/UCPqsHNuWTAbckHg4R3WAJIg" target=”_blank”><li>487 @ YouTube</li></a>
    <a href="https://www.instagram.com/luxxreno/?hl=en" target=”_blank”><li>2.6k @ Instagram</li></a>
    <a href="https://www.twitch.tv/luxxreno" target=”_blank”><li>3k @ Twitch</li></a><br>
    <a href="https://twitter.com/LuxxReno" target=”_blank”><li>2.5k @ Twitter</li></a>
    <a href="https://www.tiktok.com/@luxxxreno?lang=en&is_copy_url=1&is_from_webapp=v1" target=”_blank”><li>657k @ TikTok</li></a>
</ul>
  </div>
</div>

  </div>

  <div class="meet-the-owner">

    <h3>Content Creator</h3>

  </div>

  <div class="luxxreno">

    <img src="images/abz-c.png">
    <div class="q-l">
    <div class="questions">
      <h2 class="luxx-name">ABZZINO</h2>
      <h2 class="owner">Content Creator</h2>
      <p>Real Name: <b>Abdullah Khan</b></p>
      <p>Online Name: <b>Abzzino</b></p>
      <p>First Game Played as a Kid: <b>Call Of Duty</b></p>
      <p>Game I'm Best At: <b>Call Of Duty (all of them)</b></p>
      <p>If You Were a Superhero, What Would Your Power Be?: <br> <b>Flying</b></p>
      <p>Hidden Talents: <b>They're hidden for a reason.</b></p>
    </div>

  <div class="luxx-socials">
<ul>
    <a href="https://www.youtube.com/c/Abzzino/featured" target=”_blank”><li>360 @ YouTube</li></a>
    <a href="https://www.instagram.com/_abzzino_/" target=”_blank”><li>193 @ Instagram</li></a>
    <a href="https://www.twitch.tv/abzzinok" target=”_blank”><li>2.6k @ Twitch</li></a><br>
    <a href="https://twitter.com/_Abzzino_" target=”_blank”><li>142 @ Twitter</li></a>
    <a href="https://www.tiktok.com/@abzzinoyt?lang=en" target=”_blank”><li>23.6k @ TikTok</li></a>
</ul>
  </div>
</div>

  </div>

  <div class="meet-the-owner">

    <h3>COMPETITIVE PLAYER</h3>

  </div>

  <div class="luxxreno">

    <img src="images/kyran-c.png">
    <div class="q-l">
    <div class="questions">
      <h2 class="luxx-name">KEEZO</h2>
      <h2 class="owner">COMPETITIVE PLAYER</h2>
      <p>Real Name: <b>Kyran Garden</b></p>
      <p>Online Name: <b>KEEZO</b></p>
      <p>First Game Played as a Kid: <b>Call Of Duty 3</b></p>
      <p>Game I'm Best At: <b>Warzone</b></p>
      <p>If You Were a Superhero, What Would Your Power Be?: <br> <b>Flying</b></p>
      <p>Favourite Artist of All Time: <b>Drake</b></p>
      <p>Hidden Talents: <b>I'm good at football.</b></p>
    </div>

  <div class="luxx-socials">
<ul>
    <a href="https://www.twitch.tv/LKeezo" target=”_blank”><li>400 @ Twitch</li></a>
    <a href="https://twitter.com/KEEZZ0" target=”_blank”><li>1.2k @ Twitter</li></a>
    <a href="https://www.tiktok.com/@kkeezo?lang=en" target=”_blank”><li>1.1k @ TikTok</li></a>
</ul>
  </div>
</div>

  </div>

  <div class="meet-the-owner">

    <h3>Content Manager</h3>

  </div>

  <div class="luxxreno">

    <img src="images/brad-c.png">
    <div class="q-l">
    <div class="questions">
      <h2 class="luxx-name">SPODERBRAD</h2>
      <h2 class="owner">Content Manager</h2>
      <p>Real Name: <b>Brad</b></p>
      <p>Online Name: <b>SpoderBrad</b></p>
      <p>First Game Played as a Kid: <b>Metal Gear Solid</b></p>
      <p>Game I'm Best At: <b>Splitgate</b></p>
      <p>If You Were a Superhero, What Would Your Power Be?: <br><b>Honestly don’t want a super power just wanna <br> be Iron Man.</b></p>
      <p>Favourite Artist of All Time: <br> <b>Drake or Eminem can’t decide</b></p>
      <p>Hidden Talents: <b>Best Free Kick Taker on Twitch.</b></p>
    </div>

  <div class="luxx-socials">
<ul>
    <a href="https://www.youtube.com/channel/UCnqgXWWmmg1F3L919lzT6aQ" target=”_blank”><li>353 @ YouTube</li></a>
    <a href="https://www.instagram.com/spoderbrad/?hl=en-gb" target=”_blank”><li>115 @ Instagram</li></a>
    <a href="https://www.twitch.tv/SpoderBrad" target=”_blank”><li>2.1k @ Twitch</li></a><br>
    <a href="https://twitter.com/SpoderBrad" target=”_blank”><li>392 @ Twitter</li></a>
    <a href="https://www.tiktok.com/@spoderbrad?lang=en" target=”_blank”><li>60k @ TikTok</li></a>
</ul>
  </div>
</div>

  </div>

    </section>


    <!--FOOTER-->

    <footer>
      <div class="footer-headers">
        <ul>
          <li>
            <a href="index.html">Home</a>
          </li>
          <li>
            <a href="news.html">News</a>
          </li>
          <li>
            <a href="players.html">Players</a>
          </li>
          <li>
            <a href="partners.html">Partners</a>
          </li>
          <li>
            <a href="about-us.html">About Us</a>
          </li>
        </ul>
      </div>
      <div class="foot-logo">
        <img src="images/HD_FILE (2).png" />
        
      </div>
      <div class="socials">

        <a href="https://www.tiktok.com/@luxxmob?lang=en"> <i class="fab fa-tiktok"></i></a>
        <a href="https://twitter.com/LuxxMob"> <i class="fab fa-twitter"></i></a>
        <a href="https://www.instagram.com/TheLuxxMob/"> <i class="fab fa-instagram"></i></a>
      </div>
      <div class="copyright">
        <h4>&copy 2021 LuxxMob</h4>
        <h4>Made with  &#10084 by <a href="https://www.tiktok.com/@truechow?lang=en">@truechow</a></h4>
      </div>
    </footer>

Answer 1

使用 left: 25em 和 position: relative 用于 .luxxreno。

.luxxreno {
text-align: left;
position: relative; /* This */
left: 25em; /* And this */
padding-top: 5em;
bottom: 9.375em;
width: 100%;
}

删除 left: 25em 或更改 position

Answer 2

所以首先，你必须找出导致滚动的元素。

这非常简单。只需在代码中的任何位置添加此 CSS 即可。（首选位置是index.html）

 * {
   outline: 1px solid red !important;
   opacity: 1 !important;
   visibility: visible !important
}

使用这段代码，您将能够看到是哪个元素导致了滚动，然后简单地找到根本原因或通过

抑制滚动

overflow:hidden

我的移动网站上有溢出

there is overflow on my website on mobile

html

css

layout

responsive

media