我在移动设备上遇到问题，我的网站看起来不错，但是当您向下滚动时，屏幕保持不变，但导航栏向右延伸。网页的内容保持不变，但是空格向右打开，您可以向右滚动，没有内容，这部分没有内容。当我向上滚动时，右侧有一个很长的导航栏。 我留下了我的代码。并原谅表达的形式，但我使用翻译来写。 缺少添加样式，但这些是重要的 谢谢！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Principal</title>
<link href="https://fonts.googleapis.com/css?family=Arima+Madurai|Cormorant+Upright|Farsan" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
<section class="hero" id="intro">
<div class="container">
<div class="row">
<div class="col-md-12 text-right navicon"> <a id="nav-toggle" class="nav_slide_button" href="#"> <span></span> </a> </div>
</div>
<div class="row"> </div>
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center inner">
<div class="animatedParent">
<h1 class="animated fadeInDown">Se</h1>
<p class="animated fadeInUp">De</p>
</div>
</div>
</div>
</div>
</section>
<div id="navigation">
<nav class="navbar navbar-custom" role="navigation">
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="site-logo"> <img id="logo" src="img/logo.png" /> </div>
</div>
<div class="col-md-10">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu"> <i class="fa fa-bars"></i> </button>
</div>
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav navbar-right">
<li class="active"> <a href="#intro">Casa</a> </li>
<li> <a href="#about">Sobre mi</a> </li>
<li> <a href="#service">Servicios</a> </li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
<section id="about" class="home-section color-dark bg-white">
<div class="container marginbot-50">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="animatedParent">
<div class="section-heading text-center animated bounceInDown">
<h2 class="h-bold">hola</h2>
<div class="divider-header"></div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 animatedParent">
<div class="text-center">
<p>Aqui v acontenido que n ahora no viene </p>
<p>Especialistas</p>
<a href="#" class="btn btn-skin btn-scroll">Mas servicios</a> </div>
</div>
</div>
</div>
</section>
<section id="service" class="home-section color-dark bg-gray">
<div class="container marginbot-50">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div>
<div class="section-heading text-center">
<h2 class="h-bold">¿Què hacemos?</h2>
<div class="divider-header"></div>
</div>
</div>
</div>
</div>
</div>
<div class="text-center">
<div class="container">
<div class="row animatedParent">
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="animated rotateInDownLeft">
<div class="service-box"> <img src="http://i46.tinypic.com/2n0vdw0.jpg">
<div class="service-desc">
<p>texto ejemplo</p>
<a href="#" class="btn btn-skin">Nue</a> </div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="animated rotateInDownLeft">
<div class="service-box">
<div class="service-desc"> <img src="http://i46.tinypic.com/2n0vdw0.jpg">
<p>Ejemplo.</p>
<a href="#" class="btn btn-skin">Nu</a> </div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="animated rotateInDownRight slow">
<div class="service-box">
<div class="service-desc"> <img src="http://i46.tinypic.com/2n0vdw0.jpg">
<p>Tod</p>
<a href="#" class="btn btn-skin">Nu</a> </div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="animated rotateInDownRight slower">
<div class="service-box">
<div class="service-desc"> <img src="http://i46.tinypic.com/2n0vdw0.jpg">
<p>Ven</p>
<a href="#" class="btn btn-skin">Nu</a> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="works" class="home-section color-dark text-center bg-white">
<div class="container marginbot-50">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div>
<div class="animatedParent">
<div class="section-heading text-center">
<h2 class="h-bold animated bounceInDown">Al</h2>
<div class="divider-header"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row animatedParent">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="row gallery-item">
<div class="col-md-3 animated fadeInUp"> <a href="http://i46.tinypic.com/2n0vdw0.jpg" title="Vea como queda tras pasar nosotros..." data-lightbox-gallery="gallery1" data-lightbox-hidpi="img/works/1@2x.jpg"> <img src="#" class="img-responsive" alt="img"> </a> </div>
<div class="col-md-3 animated fadeInUp slow"> <a href="http://i46.tinypic.com/2n0vdw0.jpg" title="Remondes y podas eficaces..." data-lightbox-gallery="gallery1" data-lightbox-hidpi="img/works/1@2x.jpg"> <img src="#" class="img-responsive" alt="img"> </a> </div>
<div class="col-md-3 animated fadeInUp slower"> <a href="http://i46.tinypic.com/2n0vdw0.jpg" title="Diseñamos su jardin..." data-lightbox-gallery="gallery1" data-lightbox-hidpi="img/works/1@2x.jpg"> <img src="#" class="img-responsive" alt="img"> </a> </div>
<div class="col-md-3 animated fadeInUp"> <a href=" http://i46.tinypic.com/2n0vdw0.jpg" title="Aramos su huerto y olivar..." data-lightbox-gallery="gallery1" data-lightbox-hidpi="img/works/1@2x.jpg"> <img src="#" class="img-responsive" alt="img"> </a> </div>
</div>
</div>
</div>
</div>
</section>
<footer> </footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>{{1}}