HTML гиперссылка <a href="#..."></a> ссылка, показывающая раздел идентификаторов выше вместо исходного в мобильном представлении

Question

Я разместил свою веб-страницу в 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>

и вот CSS Думаю, ошибка должна быть в:

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;
}

Если вы знаете ответ, скажите мне. Заранее спасибо :)