链接到同一页面上的另一部分html无法正常工作，为什么？

Question

我正在尝试在基本html页面上链接导航按钮。为什么不起作用？这是我的代码：

<!-- Primary Menu -->
        <div class="module menu left">
            <ul id="nav-primary" class="nav nav-primary">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#solution">Solution</a></li>
                <li><a href="#facilities">Facilities</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>

，然后... 对于第一个链接：

<section id="home" class="fullheight dark bg-black">

对于第二个链接：

<h3 id="about"><b><center>Clean Water Innovations was formed to bring solutions for our collective need for clean water.</center></b></h3>

对于第三个链接：

<h1 id="solution"><b>Solution:</b></h1>

第四个链接：

<section id="facilities">
    <div class="container text-center">
        <div class="row">

第5个链接：

<!-- Section / Contact -->
<section id="contact" class="bg-dark dark">

为什么会这样？它看起来与我链接正确。