Html 超链接<；a href="；#&引用&燃气轮机</a>；显示上面id部分而不是移动视图中原始id部分的链接

我已经在GitHub中托管了我的网页，移动版my HTML超链接显示的结果比原始的id划分起始点高出了一些像素。由于这种“效果”，它显示了上面的部分！我不知道为什么这种情况只发生在手机版而不是桌面版的网站上

我在HTML页面中的代码是：

   <nav>
       <div class="line">
           <div class="s-12 l-2">
               <p class="logo"><strong style="float:left;"><img src="img/top_icon.png"/></strong></p>
           </div>
           <div class="top-nav s-12 l-10">

               <ul class="right">
                   <li class="active-item"><a href="#carousel">Home</a></li>
                   <li><a href="#top-videos">Top Videos</a></li>
                   <li><a href="#about-us">About</a></li>
                   <li><a href="#our-work">Works</a></li>
                   <li><a href="#shopping">Shopping</a></li>
                   <li><a href="#contact">Contact</a></li>
               </ul>
           </div>
       </div>
   </nav>

如果你知道答案，请告诉我。提前感谢：）

nav {
  display:block;
  width:100%;
  background:#152732;
}
.line::after, nav::after, .center::after, .box::after, .margin::after, .margin2x::after, .grid.full::after {
  clear:both;
  content: ".";
  display:block;
  height:0;
  line-height:0;
  overflow:hidden;
  visibility:hidden;
}
.grid.margin::after, .grid.margin2x::after {
  content: "";
  display:none;
}
.nav-text:after,.nav-text:before,.nav-text span {
  background-color:#fff;
  border-radius:3px;
  content:'';
  display:block;
  height:3px;
  margin:6px auto;
  width: 30px;
  transition:all 0.2s ease-in-out;
  -moz-transition:all 0.2s ease-in-out;
  -webkit-transition:all 0.2s ease-in-out;
}
.show-menu .nav-text:before {
  transform:translateY(9px) rotate(135deg);
  -moz-transform:translateY(9px) rotate(135deg);
  -webkit-transform:translateY(9px) rotate(135deg);
}
.show-menu .nav-text:after {
  transform:translateY(-9px) rotate(-135deg);
  -moz-transform:translateY(-9px) rotate(-135deg);
  -webkit-transform:translateY(-9px) rotate(-135deg);
}
.show-menu .nav-text span {
  transform:scale(0);
  -moz-transform:scale(0);
  -webkit-transform:scale(0);  
}
.top-nav ul {padding:0;}
.top-nav ul ul {
  position:absolute;
  background:#152732;
}
.top-nav li {
  float:left;
  list-style:none outside none;
  cursor:pointer;
}
.top-nav li a {
  color:#fff; 
  display:block;
  font-size:1rem;
  padding:1.25rem; 
}
.top-nav li ul li a {
  background:none repeat scroll 0 0 #152732;
  min-width:100%;
  padding:0.625rem;
}
.top-nav li a:hover, .aside-nav li a:hover {background:#2b4c61;}
.top-nav li ul {display:none;}
.top-nav li ul li,.top-nav li ul li ul li {
  float:none;
  list-style:none outside none;
  min-width:100%;
  padding:0;
}