html - Bootstrap navbar width larger than viewport -


my navbar larger content. tried problem clicking threw browser css, nothing ist working. havent changed on bootstrap nor have overwritten thats in relation navbar.

my css & html:

/* ===============================================================================================                                          allgemeine settings     ===============================================================================================*/  html, body{      height: 100%;      width: 100%;      max-width: 100%;      font-family: arial;  }    body{  overflow-x:hidden;  }    .clearfix:before,  .clearfix:after {      content: " ";      display: table;  }  .clearfix:after {      clear: both;  }  .clearfix {      *zoom: 1;  }      /* ===============================================================================================                                          landing-page settings     ===============================================================================================*/      .home-section{      height: auto !important;      min-height: 100%;      overflow: hidden;      padding-top: 50px;      background: url(../pics/home.jpg) no-repeat center;      background-size: cover;      color: rgb(207, 207, 207);  }    #wrapper {      text-align: center;      margin-top: 20%;  }    #wrapper h1{      text-shadow: 2px 2px #000;  }    /* ===============================================================================================                                          landing-page-menu     ===============================================================================================*/    .nationalpark-options{      margin-top: 15px;      margin-left: -18px;      width: 647px;      text-shadow: none;  }    .activity-options{      margin-top: 15px;      margin-left: -18px;      width: 326px;      text-shadow: none;  }    .dropdown-menu li{      border-bottom: 1px solid black;  }    .dropdown-activity, .dropdown-ort, input[name="date"], .search{      border:2px solid darkgrey;      border-right: none;      vertical-align: middle;      font-size: 12pt;      font-weight: bold;      padding-top: 10px;      padding-left: 15px;      list-style-type:none;      float: left;      width: 100%;      height: 50px;      color: white;      text-shadow: 2px 2px #000;  }    input[name="date"]{      width: 65%;      color:black;      text-shadow: none;  }    .search{      width: 20%;      border: none;  }      .dropdown-activity a, .dropdown-ort a{      color: darkgrey;  }    .dropdown-arrow{      float: right;      padding-right: 15px;      margin-top: -18px;  }    li.page-scroll.active{      background: transparent;      border: 1px black solid;    }      /* ===============================================================================================                                          banner     ===============================================================================================*/      .activity-box{      background-color: rgb(0, 150, 64);      height: 100px;      margin-top: 184px;      margin-left: -50px;      vertical-align: middle;  }    .activity-section{      margin-top: -15%;  }    /* ===============================================================================================                                          group-content     ===============================================================================================*/    .button-wrapper{      margin-top: 60px;  }    #zurueck{      border-right: 2px solid black;  }  #new-group{      border-left: 2px solid black;      margin-left: -4px;  }    .group-wrapper{      width: 100%;      height: 400px;      border: 1px solid grey;  }    .g1{      width:23%;      max-width: 33%;      margin-top: 10%;      float:left;      margin-left: 10%;  }  .g2{      width:23%;      max-width: 33%;      float: left;      margin-top: 10%;      margin-left: 5%;      margin-right: 5%;  }  .g3{      width:23%;      max-width: 25%;      float:left;      margin-top: 10%;      margin-right: 10%;  }    .g1, .g2, .g3, .g4, .g5, .g6{     border: 1px solid darkgrey;      list-style: none;      text-align: center;  }    .g1 a, .g2 a, .g3 a, .g4 a, .g5 a, .g6 a{      color: black;  }    .g1 .dropdown-arrow, .g2 .dropdown-arrow, .g3 .dropdown-arrow,  .g4 .dropdown-arrow, .g5 .dropdown-arrow, .g6 .dropdown-arrow{      margin-top: 1px;  }    .g1 ul, .g2 ul, .g3 ul{      width: 220px;  }  .g1 ul li{      font-size: 0.72em;  }    .g3 .datepicker{      height: auto;      width: 100%;      border: none;  }    .g4{      width:23%;      max-width: 33%;      float:left;      margin-left: 10%;  }    .g5{      width:23%;      max-width: 33%;      float: left;      margin-left: 5%;      margin-right: 5%;  }    .g6{      width:23%;      max-width: 25%;      float:left;      margin-right: 10%;  }    .g4, .g5, .g6{      margin-top: 10%;      float: left;  }    .row3{      margin-top: 5%;      float: right;      margin-right: 11%;  }    /* ===============================================================================================                                          sonstiges     ===============================================================================================*/      .about-section{      height: auto !important;      min-height: 100%;      overflow: hidden;      padding-top: 50px;  }  .contact-section{      height: auto !important;      min-height: 100%;      overflow: hidden;      padding-top: 50px;  }    /* ===============================================================================================                                          bootstrap-überschreiben     ===============================================================================================*/      .dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a{      background-image: none;      background-color: #5cb85c;    }    .col-md-2,.col-md-3, .col-md-6{      padding-left: 0px;      padding-right: 0px;    }
<!doctype html>  <html lang="en">  <head>      <meta charset="utf-8">      <title>our app</title>      <meta name="desciption" content="wba">      <meta name="viewport" content="windth=device-width, inital-scale=1">      <link rel="stylesheet" href="../bootstrap-3.3.5-dist/css/bootstrap.css">      <link rel="stylesheet" href="../bootstrap-3.3.5-dist/css/bootstrap-theme.css">        <link rel="stylesheet" href="../vitalets-bootstrap-datepicker-c7af15b/css/datepicker.css">      <link rel="stylesheet" href="style/style.css">  </head>  <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">      <nav class="navbar navbar-default navbar-fixed-top">      <div class="container">            <div class="navbar-header page-scroll">              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">                  <span class="sr-only">toggle navigation</span>                  <span class="icon-bar"></span>                  <span class="icon-bar"></span>                  <span class="icon-bar"></span>                </button>                <a class="navbar-brand" rel="home" href="#home" title="buy sell rent everyting">                  <img style="max-width:100px; margin-top: -7px;"                       src="pics/logo.png">              </a>          </div>          <div class="collapse navbar-collapse" id="navbar-collapse">              <ul class="nav navbar-nav">                  <li class="page-scroll"><a href="#home">home</a></li>                  <li class="dropdown">                      <a data-toggle="dropdown" class="dropdown-toggle" href="#">aktivitäten <b class="caret"></b></a>                      <ul role="menu" class="dropdown-menu page-scroll">                          <li><a href="#aktivitäten">klettern</a></li>                          <li><a href="#aktivitäten">wandern</a></li>                          <li><a href="#aktivitäten">angeln</a></li>                          <li><a href="#aktivitäten">jagen</a></li>                          <li><a href="#aktivitäten">reiten</a></li>                          <li><a href="#aktivitäten">mountainbiking</a></li>                          <li><a href="#aktivitäten">kanu fahren</a></li>                      </ul>                  </li>                  <li class="page-scroll"><a href="#nationalparks">nationalparks</a></li>                  <li class="page-scroll"><a href="#aktuelles">aktuelles</a></li>                  <li class="page-scroll"><a href="#unterkünfte">unterkünfte</a></li>                </ul>          </div>      </div>      </nav>        <section id="home" class="home-section">      <div id="wrapper">          <h1>finde deine gruppe <br>und erlebt zusammen den park</h1>          </div>  </section>    <section id="activity" class="activity-section">  <div class="clearfix">      <div class="row">          <div class="col-md-2 col-md-offset-3">              <div class="dropdown-ort">                  nationalpark                  <li class="dropdown">                      <a data-toggle="dropdown" class="dropdown-toggle" href="#"><span class="glyphicon glyphicon-menu-down dropdown-arrow"></span> </a>                      <ul role="menu" class="dropdown-menu page-scroll" id="nationalpark-options">                          <li><a href="#aktivitäten">bayerischer wald (by)</a></li>                          <li><a href="#aktivitäten">berchtesgaden (by)</a></li>                          <li><a href="#aktivitäten">schleswig-holsteinisches wattenmeer (sh)</a></li>                          <li><a href="#aktivitäten">niedersächsisches wattenmeer (ni)</a></li>                          <li><a href="#aktivitäten">hamburgisches wattenmeer (hh)</a></li>                          <li><a href="#aktivitäten">jasmund (mv)</a></li>                          <li><a href="#aktivitäten">müritz (mv)</a></li>                          <li><a href="#aktivitäten">sächsische schweiz (sn)</a></li>                          <li><a href="#aktivitäten">unteres odertal (bb)</a></li>                          <li><a href="#aktivitäten">vorpommersche boddenlandschaft (mv)</a></li>                          <li><a href="#aktivitäten">hainich (th)</a></li>                          <li><a href="#aktivitäten">eifel (nrw)</a></li>                          <li><a href="#aktivitäten">kellerwald-edersee (he)</a></li>                          <li><a href="#aktivitäten">harz (st, ni)</a></li>                          <li><a href="#aktivitäten">schwarzwald (bw)</a></li>                          <li style="border-bottom: none;"><a href="#aktivitäten">hunsrück-hochwald (sl, rp)</a></li>                      </ul>                  </li>              </div>              </div>          <div class="col-md-2">                  <div class="dropdown-activity">                      aktivität                      <li class="dropdown">                          <a data-toggle="dropdown" class="dropdown-toggle" href="#"><span id="dropdown-arrow" class="glyphicon glyphicon-menu-down dropdown-arrow"></span> </a>                          <ul role="menu" class="dropdown-menu page-scroll" id="activity-options">                              <li><a href="#aktivitäten">bayerischer wald (by)</a></li>                              <li><a href="#aktivitäten">berchtesgaden (by)</a></li>                              <li><a href="#aktivitäten">schleswig-holsteinisches wattenmeer (sh)</a></li>                              <li><a href="#aktivitäten">niedersächsisches wattenmeer (ni)</a></li>                              <li><a href="#aktivitäten">hamburgisches wattenmeer (hh)</a></li>                              <li><a href="#aktivitäten">jasmund (mv)</a></li>                              <li><a href="#aktivitäten">müritz (mv)</a></li>                              <li><a href="#aktivitäten">sächsische schweiz (sn)</a></li>                              <li><a href="#aktivitäten">unteres odertal (bb)</a></li>                              <li><a href="#aktivitäten">vorpommersche boddenlandschaft (mv)</a></li>                              <li><a href="#aktivitäten">hainich (th)</a></li>                              <li><a href="#aktivitäten">eifel (nrw)</a></li>                              <li><a href="#aktivitäten">kellerwald-edersee (he)</a></li>                              <li><a href="#aktivitäten">harz (st, ni)</a></li>                              <li><a href="#aktivitäten">schwarzwald (bw)</a></li>                              <li style="border-bottom: none;"><a href="#aktivitäten">hunsrück-hochwald (sl, rp)</a></li>                          </ul>                      </li>                  </div>          </div>          <div class="col-md-2">              <input type="text" class="datepicker" name="date" placeholder="datum auswählen">              <button type="button" class="btn btn-success search"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>          </div>          </div>      </div>  </section>    <section class="activity-label">      <div class="row">          <div class="col-md-3 col-md-offset-3">              <div id="aktivitäten" class="activity-box">                  <h1>klettern</h1>              </div>          </div>      </div>  </section>    <section class="groups">      <div class="row">          <div class="col-md-2 col-md-offset-3">              <div class="button-wrapper">                  <button type="button" class="btn btn-success" id="zurueck">zurück</button>                  <button type="button" class="btn btn-warning" id="new-group">neue gruppe erstellen</button>              </div>          </div>      </div>      <div class="row">          <div class="col-md-6 col-md-offset-3">              <div class="group-wrapper">                 <div class="row1">                     <div class="g1">                         <li class="dropdown">                             <a data-toggle="dropdown" class="dropdown-toggle" href="#">nationalpark <span class="glyphicon glyphicon-menu-down dropdown-arrow"></span></a>                             <ul role="menu" class="dropdown-menu page-scroll">                                 <li><a href="#aktivitäten">bayerischer wald (by)</a></li>                                 <li><a href="#aktivitäten">berchtesgaden (by)</a></li>                                 <li><a href="#aktivitäten">schleswig-holsteinisches wattenmeer (sh)</a></li>                                 <li><a href="#aktivitäten">niedersächsisches wattenmeer (ni)</a></li>                                 <li><a href="#aktivitäten">hamburgisches wattenmeer (hh)</a></li>                                 <li><a href="#aktivitäten">jasmund (mv)</a></li>                                 <li><a href="#aktivitäten">müritz (mv)</a></li>                                 <li><a href="#aktivitäten">sächsische schweiz (sn)</a></li>                                 <li><a href="#aktivitäten">unteres odertal (bb)</a></li>                                 <li><a href="#aktivitäten">vorpommersche boddenlandschaft (mv)</a></li>                                 <li><a href="#aktivitäten">hainich (th)</a></li>                                 <li><a href="#aktivitäten">eifel (nrw)</a></li>                                 <li><a href="#aktivitäten">kellerwald-edersee (he)</a></li>                                 <li><a href="#aktivitäten">harz (st, ni)</a></li>                                 <li><a href="#aktivitäten">schwarzwald (bw)</a></li>                                 <li style="border-bottom: none;"><a href="#aktivitäten">hunsrück-hochwald (sl, rp)</a></li>                             </ul>                         </li>                     </div>                     <div class="g2">                         <li class="dropdown">                             <a data-toggle="dropdown" class="dropdown-toggle" href="#">nationalpark <span class="glyphicon glyphicon-menu-down dropdown-arrow"></span></a>                             <ul role="menu" class="dropdown-menu page-scroll">                                 <li><a href="#aktivitäten">klettern</a></li>                                 <li><a href="#aktivitäten">wandern</a></li>                                 <li><a href="#aktivitäten">angeln</a></li>                                 <li><a href="#aktivitäten">jagen</a></li>                                 <li><a href="#aktivitäten">reiten</a></li>                                 <li><a href="#aktivitäten">mountainbiking</a></li>                                 <li><a href="#aktivitäten">kanu fahren</a></li>                             </ul>                         </li>                     </div>                         <div class="g3">                             <input type="text" class="datepicker" placeholder="datum auswählen">                         </div>              </div>                  <div class="row2">                      <div class="g4">                          <li class="dropdown">                              <a data-toggle="dropdown" class="dropdown-toggle" href="#">nationalpark <span class="glyphicon glyphicon-menu-down dropdown-arrow"></span></a>                              <ul role="menu" class="dropdown-menu page-scroll">                                  <li><a href="#aktivitäten">bayerischer wald (by)</a></li>                                  <li><a href="#aktivitäten">berchtesgaden (by)</a></li>                                  <li><a href="#aktivitäten">schleswig-holsteinisches wattenmeer (sh)</a></li>                                  <li><a href="#aktivitäten">niedersächsisches wattenmeer (ni)</a></li>                                  <li><a href="#aktivitäten">hamburgisches wattenmeer (hh)</a></li>                                  <li><a href="#aktivitäten">jasmund (mv)</a></li>                                  <li><a href="#aktivitäten">müritz (mv)</a></li>                                  <li><a href="#aktivitäten">sächsische schweiz (sn)</a></li>                                  <li><a href="#aktivitäten">unteres odertal (bb)</a></li>                                  <li><a href="#aktivitäten">vorpommersche boddenlandschaft (mv)</a></li>                                  <li><a href="#aktivitäten">hainich (th)</a></li>                                  <li><a href="#aktivitäten">eifel (nrw)</a></li>                                  <li><a href="#aktivitäten">kellerwald-edersee (he)</a></li>                                  <li><a href="#aktivitäten">harz (st, ni)</a></li>                                  <li><a href="#aktivitäten">schwarzwald (bw)</a></li>                                  <li style="border-bottom: none;"><a href="#aktivitäten">hunsrück-hochwald (sl, rp)</a></li>                              </ul>                          </li>                      </div>                      <div class="g5">                          <li class="dropdown">                              <a data-toggle="dropdown" class="dropdown-toggle" href="#">nationalpark <span class="glyphicon glyphicon-menu-down dropdown-arrow"></span></a>                              <ul role="menu" class="dropdown-menu page-scroll">                                  <li><a href="#aktivitäten">klettern</a></li>                                  <li><a href="#aktivitäten">wandern</a></li>                                  <li><a href="#aktivitäten">angeln</a></li>                                  <li><a href="#aktivitäten">jagen</a></li>                                  <li><a href="#aktivitäten">reiten</a></li>                                  <li><a href="#aktivitäten">mountainbiking</a></li>                                  <li><a href="#aktivitäten">kanu fahren</a></li>                              </ul>                          </li>                      </div>                      <div class="g6">                          <li class="dropdown">                              <a data-toggle="dropdown" class="dropdown-toggle" href="#">nationalpark <span class="glyphicon glyphicon-menu-down dropdown-arrow"></span></a>                              <ul role="menu" class="dropdown-menu page-scroll">                                  <li><a href="#aktivitäten">klettern</a></li>                                  <li><a href="#aktivitäten">wandern</a></li>                                  <li><a href="#aktivitäten">angeln</a></li>                                  <li><a href="#aktivitäten">jagen</a></li>                                  <li><a href="#aktivitäten">reiten</a></li>                                  <li><a href="#aktivitäten">mountainbiking</a></li>                                  <li><a href="#aktivitäten">kanu fahren</a></li>                              </ul>                          </li>                      </div>                  </div>                  <div class="row3">                      <button type="button" class="btn btn-success" id="bestaetigen">bestätigen</button>                  </div>              </div>              </div>          </div>  </section>    <section id="nationalparks" class="about-section">    nationalparks  </section>    <section id="aktuelles" class="contact-section">      aktuelles  </section>    <section id="unterkünfte" class="contact-section">      unterkünfte  </section>      <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>  <script src="scroll-nav.js"></script>  <script src="content_jquery.js"></script>  <script src="../bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>  <script src="../vitalets-bootstrap-datepicker-c7af15b/js/bootstrap-datepicker.js"></script>  <script src="../vitalets-bootstrap-datepicker-c7af15b/js/locales/bootstrap-datepicker.de.js"></script>    </body>  </html>

this looks like: http://www.directupload.net/file/d/4096/ztgt2d8h_jpg.htm

so want rid of whitespace on right side somehow caused navbar

create css file line hide unwanted space.

body {   overflow-x:hidden; } 

Comments

Popular posts from this blog

c# - Binding a comma separated list to a List<int> in asp.net web api -

Delphi 7 and decode UTF-8 base64 -

html - Is there any way to exclude a single element from the style? (Bootstrap) -