navbar Überlauf (x) Seiteninhalt

Question

Ich habe eine Website mit Bootstrap 3 erstellt. Im Reaktionsmodus hat meine index.html Seite eine horizontale Bildlaufleiste. Ich konnte nicht finden, was diesen Überlauf-x verursacht. Dies geschieht nur in meiner index.html Seite.

Auf den anderen Seiten ist dieser Überlauf nicht vorhanden. Zuerst dachte ich, dass es etwas im Kontaktbereich meiner index.html ist, der einen Boxschatten hat, der den Überlauf in x verursachte. Selbst nachdem ich ihn entfernt hatte, war der Überlauf vorhanden, was mich zu dem Schluss brachte, dass die Navigationsleiste diejenige ist, die das Problem verursacht.

Ich bin nicht in der Lage zu finden, was dieses Problem verursacht.

Screenshot: (der Überlauf an der rechten Seite)

HTML-Code für navbar:

<header id="main"> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false"> 
        <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" href=""> 
        <!-- <img class="img img-responsive" src="www/images/srs-logo.jpg" alt="SRS Constructions"> --> 
        SRS Constructions 
       </a> 
      </div> 
      <div class="collapse navbar-collapse navbar-right" id="collapse"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a class="main" href="#main">Home <span class="sr-only">(current)</span></a> 
        </li> 
        <li class="dropdown" id="nav-about"> 
         <a href="#about" class="dropdown-toggle main" role="button" aria-haspopup="true" aria-expanded="false">About 
         </a> 
         <ul class="dropdown-menu" style="left:0;right: auto"> 
          <li><a href="about.html">The Founder</a></li> 
          <li role="separator" class="divider"></li> 
          <li><a href="health-policy.html">HSE Policy</a></li> 
          <li><a href="quality-policy.html">Quality Policy</a></li> 
         </ul> 
        </li> 
        <li><a class="main" href="#services">Services</a></li> 
        <li><a class="main" href="#projects">Our Projects</a></li> 
        <li><a class="main" href="#whyus">Why Us</a></li> 
        <li><a class="main" href="#contact">Contact</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</header> 

I keine spezifische CSS hinzugefügt haben, die die Breite ändert der Navigationsleiste.

CSS für navbar:

/*Navbar styles*/ 

.navbar { 
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3); 
} 

.navbar-default .navbar-nav { 
    font-size: 15px; 
} 

.navbar-fixed-top { 
    min-height: 80px; 
} 

.navbar-nav > li > a { 
    padding-top: 0px; 
    padding-bottom: 0px; 
    line-height: 80px; 
} 


.dropdown-menu > .active > a, 
.dropdown-menu > .active > a:hover, 
.dropdown-menu > .active > a:focus { 
    color: #ffffff; 
    text-decoration: none; 
    outline: 0; 
    background-color: #b4a28f; 
} 

@media (max-width: 767px) { 
    .navbar-nav > li > a { 
     line-height: 30px; 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
    .navbar-brand > img { 
     width: 40%; 
     position: relative; 
     display: inline-block; 
     height: auto; 
     margin-left: 90px; 
     margin-top: -80px; 
    } 
    #footer { 
     color: #2e2e2e; 
    } 
} 

@media (min-width: 767px) { 
    #footer { 
     color: #ffffff; 
    } 
} 

.navbar-brand > img { 
    width: 30%; 
    position: relative; 
    display: inline-block; 
    height: auto; 
    margin-left: 50px; 
    margin-top: -15px; 
} 

Die Website gibt es auch here

Bitte helfen Sie mir mit diesem Problem beheben.

Answer 1

Achten Sie darauf, die "Regeln" für das Netz folgen ...

Spalten .col-* in .row gewickelt werden müssen, und nur.col-* sollte die unmittelbare Kind eines .row

.row>.gallery sein im Bereich Projekte verursacht die Bildlaufleiste seit .gallery ist keine Spalte.