为什么我的简单CSS滚动快照不起作用？

Question

我尝试使用滚动快照功能，但是它不起作用。我很困惑-我在做什么错？？

<!doctype html>
<html>
<body>

    <div class="section" style="background-color: peachpuff">
        <h2>Headline</h2>
        <p>My Text</p>
    </div>

    <div class="section">
        <h2>another Headline</h2>
        <p>Another line of text</p>
    </div>

    <div class="section" style="background-color: peachpuff">
        <h2>next Headline</h2>
        <p>Text line - lorem ipsum and stuff</p>
    </div>

    <div class="section">
        <h1>THE END OF THE SCROLL</h1>
    </div>

</body>
</html>
CSS：

body
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 80%;
    margin: auto;
    scroll-snap-type: y mandatory;


h1, h2
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Sans', Arial, sans-serif;

.section
    display: flex;
    flex-direction: column;
    width:100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;

https://codepen.io/Shampie/pen/vYOrOEW

提前感谢！

（首先是代码不足，现在代码太多，我需要更多文本...我不知道要说些什么）

我尝试使用滚动快照功能，但是它不起作用。我很困惑-我在做什么错？ HTML：