title: scroll-snap-type doesn't work, How can I fix it?
body: <p>It is scrolled down as it originally works, I mean, like there's no scroll-snap option. why?</p>
  <p>html code below:</p>
  <pre><code>&lt;body&gt;
      &lt;noscript&gt;~~&lt;/noscript&gt;
      &lt;div id=&quot;background&quot;&gt;&lt;/div&gt;
      &lt;header&gt;
          &lt;nav&gt;&lt;a href=&quot;/&quot;&gt;&lt;img src=&quot;~~&quot; alt=&quot;To Mainpage&quot;&gt;&lt;/a&gt;&lt;/nav&gt;
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href=&quot;/&quot;&gt;~~&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;/&quot;&gt;~~&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
      &lt;main&gt;
          &lt;div id=&quot;container&quot;&gt;
              &lt;section id=&quot;first&quot;&gt;
                  &lt;h1&gt;~~&lt;/h1&gt;
                  &lt;article&gt;~~&lt;/article&gt;
              &lt;/section&gt;
              &lt;section id=&quot;second&quot;&gt;&lt;/section&gt;
          &lt;/div&gt;
      &lt;/main&gt;
  &lt;/body&gt;
  </code></pre>
  <p>and CSS code below:</p>
  <pre><code>#container {
      scroll-snap-type: y mandatory;
      overflow-y: scroll;
  }
  
  #container &gt; section {
      height: 100vh;
      scroll-snap-align: start;
  }
  </code></pre>