Html iOS（iPhone8 Plus）上的网页显示混乱

我正在练习网页设计/开发，我在freecodecamp.org上完成了一项挑战，你可以在这里找到网页：

我发送了一个群聊的链接，有人在iPhone8 Plus上打开了它

起初，他在Twitter浏览器上打开了它，但他说，它在Safari上的显示完全相同。

    <header id="header">
      <img src="https://i.imgur.com/Wt78Ado.png" alt="Logo" id="header-img">
      <button class="nav-btn-container" onclick="toggle()">
        <span class="nav-btn"></span>
      </button>
      <nav id="nav-bar">
        <ul class="nav-list">
          <li class="nav-item" data-page="features-section"><a href="#features-section" onclick="toggle()" class="nav-link">Features</a></li>
          <li class="nav-item" data-page="video-section"><a href="#video-section" onclick="toggle()" class="nav-link">Unboxing</a></li>
          <li class="nav-item" data-page="purchase-section"><a href="#purchase-section" onclick="toggle()" class="nav-link">Purchase</a></li>
          <li class="nav-item" data-page="reviews-section"><a href="#reviews-section" onclick="toggle()" class="nav-link">Reviews</a></li>
        </ul>
      </nav>
    </header>

    <main>      
      <section class="hero">
        <div class="container">
          <h1><span>Watch</span> your step...<br> and your time</h1>
          <h2>With this wonderful invention</h2>
          <p>From a company that not only creates smartphones, but now also <span>smart</span>watches</p>
          <a href="#purchase-section">Buy Now</a>
        </div>
      </section>

      <section id="features-section">
        <div class="container">
          <div class="carousel">
            <a class="carousel-button previous" tabindex="0"><</a>
              <div class="carousel-images">
                <img src="https://i.imgur.com/DJrrKNi.jpg" alt="Watch Image">
                <img src="https://i.imgur.com/eSoFCHu.jpg" alt="Watch Image">
                <img src="https://i.imgur.com/u3WMjcv.jpg" alt="Watch Image">
                <img src="https://i.imgur.com/YXaVqqK.jpg" alt="Watch Image">
              </div>
              <a class="carousel-button next" tabindex="0">></a>
              </div>
            <div class="info">
              <div class="info-box battery">
                <i class="fa fa-battery-full"></i>
                <p>Durable Battery</p>
              </div>

              <div class="info-box protection">
                <i class="fa fa-shield-alt"></i>
                <p>Water and dust proof</p>
              </div>

              <div class="info-box tech">
                <i class="fa fa-stopwatch"></i>
                <p>Newest technologies</p>
              </div>

              <div class="info-box design">
                <i class="fa fa-clock"></i>
                <p>Modern Design</p>
              </div>
            </div>
          </div>
          </section>

        <section id="video-section">
          <div class="container">
            <h1>Unboxing</h1>
            <p>We sugest watching the following video showing the contents of the product as well as a comprehensive review</p>
            <div class="video-container">
              <iframe id="video" src="https://www.youtube.com/embed/qK7iSbDpwPs" frameborder="0" allowfullscreen></iframe>
            </div>
          </div>
        </section>

        <section id="purchase-section">
          <div class="container">
            <h1>Buy Now</h1>
            <form action="https://www.freecodecamp.com/email-submit" id="form">
              <legend>Choose your color:</legend>
              <fieldset class="form-color-container">

                <input type="radio" name="color" id="black" value="black">
                <label for="black"></label>

                <input type="radio" name="color" id="silver" value="silver">
                <label for="silver"></label>

                <input type="radio" name="color" id="rose" value="rose">
                <label for="rose"></label>

              </fieldset>
              <div class="inputs-form-section">
                <fieldset class="form-info-container">
                  <label for="name">
                    <input type="text" id="name" placeholder="Name" required></label>
                  <label for="email">
                    <input type="email" id="email" placeholder="Email" name="email" required></label>
                  <label for="phone">
                    <input type="tel" pattern="0[72][2345][0-9]{7}" id="phone" placeholder="Phone Number" required></label>
                  <label for="adress">
                    <input type="text" id="adress" placeholder="Adress" required></label>
                </fieldset>
              <div class="cards-container">
                <i class="fab fa-cc-mastercard"></i>
                <i class="fab fa-cc-visa"></i>
                <i class="fab fa-cc-paypal"></i>
                <i class="fab fa-cc-apple-pay"></i>
                <i class="fab fa-cc-stripe"></i>
              </div>
              <fieldset class="form-card-container">
                <label for="card-number">
                  <input type="number" name="card-number" id="card-number" placeholder="Card number"></label>

                <div class="date-cvv">
                  <label for="month">
                    <input type="month" name="month" id="month"></label>
                  <label for="cvv">
                    <input type="number" name="cvv" id="cvv" maxlength="4" placeholder="CVV" min="100"></label>
                </div>
              </fieldset>
              <label for="submit">
                <input name="submit" type="submit" id="submit"></input>
              <i class="fa fa-shopping-cart"></i>Purchase</label>
          </div>
          </form>
        </div>
      </section>

    <section id="reviews-section">
      <div class="container">

        <div class="reviews-count">
          <h2><span>4.5 </span>/ 5</h2>
          <div class="stars">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star-half"></i>
          </div>
          <h3>7 reviews</h3>
        </div>

        <div class="rev-sort">
          <p>Showing <b>1-4</b> out of <b>7</b> reviews</p>
          <p>Sorting by: <b>Rate▼</b> Time</p>
        </div>
        <div class="reviews">
          <div class="rev">
            <div class="rev-header">
              <img src="https://i.imgur.com/1MkxkgC.jpg">
              <div class="rev-stars">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
              </div>
              <h2>John Smith</h2>
            </div>
            <h3>Good, really good! I am happy I chose it! :)</h3>
          </div>
          <div class="rev">
            <div class="rev-header">
              <img src="https://imgur.com/OEdKQu1.jpg">
              <div class="rev-stars">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
              </div>
              <h2>Hannah Johns</h2>
            </div>
            <h3>It is really a good product, although the only downsight is the battery, it doesn't last that long...</h3>
          </div>
          <div class="rev">
            <div class="rev-header">
              <img src="https://i.imgur.com/os0ehey.jpg">
              <div class="rev-stars">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
              </div>
              <h2>Rob Rogers</h2>
            </div>
            <h3>It's ok, but it could have been better.</h3>
          </div>
          <div class="rev">
            <div class="rev-header">
              <img src="https://i.imgur.com/ZhEvFdi.jpg">
              <div class="rev-stars">
                <i class="fa fa-star"></i>
              </div>
              <h2>Grumpy "Spoiled" Gregory</h2>
            </div>
            <h3>I dun lik it, iam a triggered asshole!!! Ahhhhhhhhh, Imma smash my keyboard!!!!!!!!! sjnjdfgnfngkdfbgdngjfdkgbfkbgkdfbsudfffffhfhfahbgihobghfobifobgfhbgsufdhbgsjfhgsjhg</h3>
          </div>
        </div>

      </div>
    </section>
    </main>

    <footer>
      <div class="container">
        <div class="social">
          <i class="fab fa-facebook"></i>
          <i class="fab fa-instagram"></i>
          <i class="fab fa-twitter"></i>
        </div>
        <p>©All rights reserved.</p>
      </div>
    </footer>

注意你的脚步…
和你的时间
有了这个奇妙的发明
这家公司不仅生产智能手机，现在还生产智能手表

耐用电池

防水防尘

最新技术

现代设计

拆箱
我们建议观看以下视频，展示产品的内容以及全面的评论

立即购买
选择您的颜色：
购买
4.5 / 5
7次审查
显示7个评论中的1-4个

按：速率排序▼ 时间

约翰·史密斯
很好，真的很好！我很高兴我选择了它！：）
汉娜·约翰斯
这确实是一个好产品，虽然唯一的缺点是电池，但它不会持续那么长时间。。。
罗布·罗杰斯
没关系，但本来可以更好。
脾气暴躁的“宠坏”格雷戈里
我不喜欢，我是个被触发的混蛋！！！啊，我把我的键盘砸碎了！！！！！！！！！SJJDFGNFNGKDFBGDNGJFDKGBKBGDFBSUDFFFHFHFHFHFHBGIHOBGFOBIFBGFHBGSUFDHBGSJFHGSHGSHGSHGSHGSHGSHGSHGSHGSHGSHGSHGSHGSHGSHGSHGSHGSHGSHGSHGSHGSHGSHGSHGSHGS
©版权所有

尝试删除复制您的问题不需要的所有内容。尝试删除复制您的问题不需要的所有内容。