当我在 header 下面添加一个部分时出现水平滚动条

Question

我做了我的header(w-screenh-screen)基本没有任何问题。现在我完成了我的 header，所以我想继续学习其他内容。第一步是添加一个部分，所以我添加： <section class="w-screen h-screen></section> 我的网站上首先出现的是水平滚动条？有谁知道为什么会这样？

我的完整代码：

<!-- Tailwind + Typekit -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.typekit.net/eua1ond.css">


<!-- Body -->
<header class="w-screen h-screen flex flex-col bg-no-repeat bg-cover bg-bottom bg-fixed bg-header_mob sm:bg-header_lptpsm laptop-big:bg-header">
  <nav class="fixed left-0 right-0 flex justify-between flex-wrap px-12 py-2 laptop-big:px-20">
    <a href="index.html">
      <img id="logo" class="object-cover h-12 w-auto laptop-big:h-16" src="images/GNRdigitalTrees.svg" alt="Portfolio logo - GNR digital">
    </a>
    <div class="flex items-center md:hidden">
      <button id="menuButton" class="flex items-center px-3 py-2 border rounded text-offwhite border-offwhite hover:text-opacity-30 hover:border-opacity-30">
        <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/>
        </svg>
      </button>
    </div>
    <div id="navLinks" class="w-full hidden md:flex md:flex-row md:w-auto">
      <ul class="mob mt-4 items-center md:mt-0 md:flex-grow md:flex md:justify-end font-nav font-bold uppercase text-sm tracking-extrawide text-offwhite 2xl:drop-shadow-xl">
        <li class="mr-4 md:ml-0"><a href="#" class="md:inline-block md:mt-0 text-teal-200 hover:text-white">Skills</a></li>
        <span class="rounded-full w-1.5 h-1.5 bg-offwhite md:inline-block mr-4 mb-0.5"></span>
        <li class="mr-4 md:ml-0"><a href="#" class="md:inline-block md:mt-0 text-teal-200 hover:text-white">Work</a></li>
        <span class="rounded-full w-1.5 h-1.5 bg-offwhite md:inline-block mr-4 mb-0.5"></span>
        <li class="mr-4 md:ml-0"><a href="#" class="md:inline-block md:mt-0 text-teal-200 hover:text-white">Cv</a></li>
        <span class="rounded-full w-1.5 h-1.5 bg-offwhite md:inline-block mr-4 mb-0.5"></span>
        <li class="md:ml-0"><a href="#" class="md:inline-block md:mt-0 text-teal-200 hover:text-white">Contact</a></li>
      </ul>
    </div>
  </nav>

  <div class="flex-grow grid grid-rows-2 sm:grid-cols-2 sm:justify-items-stretch border border-red-300">
    <div class="flex flex-col row-start-2 row-end-3 px-12 mt-24 sm:mt-0 sm:col-start-1 sm:col-end-2 sm:pl-8 sm:pr-12 sm:mb-32 sm:justify-self-center sm:place-content-end laptop-big:pl-20 laptop-big:pr-28">
      <h1 class="font-header font-medium text-4xl text-desertstorm laptop-big:text-5xl">Welcome</h1>
      <p class="font-body font-extralight text-lg text-desertstorm mt-1 ml-1 laptop-big:text-xl">I'm Gunnar Van Remoortere, I design and code websites and brands. Are you looking for someone to help you with a digital related job? </p>
      <div class="mt-6">
        <a href="#" class="px-6 py-2 rounded-lg bg-white bg-opacity-10 border-2 border-white border-opacity-10 backdrop-blur-xl text-center text-desertstorm text-base font-medium tracking-widest cursor-pointer uppercase hover:bg-opacity-20">Contact me</a>
      </div>
    </div>
    <div class="invisible flex flex-row md:visible md:items-center md:justify-self-end md:col-start-2 md:col-end-3 md:row-start-1 md:row-end-3 md:mr-4">
      <h2 class="md:h-1/2 md:transform md:rotate-90 md:uppercase md:text-desertstorm md:text-5xl md:font-body md:font-thin md:tracking-extrawide md:mr-12 laptop-big:text-6xl laptop-big:mr-10">Portfolio</h2>
    </div>
  </div>
</header>

在我添加了部分的标签下方，出现了滚动条...

添加该部分后，当我检查我的页面时，它看起来像这样：

节前：

添加的部分：

我添加了一些边框以清楚地看到什么元素到达哪里，但我仍然不明白这里的问题...

Answer 1

在我继续研究这个问题后解决了我自己的问题……显然只是滚动条占用了 space，因此弄乱了 w-screen。

当我在 header 下面添加一个部分时出现水平滚动条

Horizontal scrollbar appears when I add a section underneath my header

html

css

tailwind-css