Wordpress 4.3 & Bootstrap 3.x - Warum überlappen sich meine Container?

Question

Ich entwickle ein Thema in Wordpress, das Bootstrap enthält. Meine Navigationsleiste überlappt aus irgendeinem unbekannten Grund den Text auf meiner Seite oben. Es ist, als ob die Navigationsleiste über der Webseite schwebt.

Ich habe versucht, "Zeile" hinzuzufügen und eine Breite von 12 angeben, aber das scheint nicht zu funktionieren. Hier

ist der HTML-Code für die navbar:

<!-- NAVIGATION 
==================================================================== --> 

<div class="navbar-wrapper"> 
    <nav class="navbar navbar-fixed-top navbar-inverse" role="navigation"> 
     <div class="container"> 

      <!-- left side of navbar --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data- 
        toggle="collapse" data-target=".navbar-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="/">BRAND</a> 
      </div> <!-- end navbar-header --> 

      <!-- right side of navbar --> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li id="menu-item-216" class="menu-item menu-item-type- 
post_type menu-item-object-page menu-item-home menu-item-216"><a 
href="http://www.example.com/">Home</a></li> 
<li id="menu-item-205" class="menu-item menu-item-type-post_type menu-item- 
object-page current-menu-item page_item page-item-203 current_page_item 
menu-item-205"><a href="http://www.example.com/about-us/">About Us</a></li> 
<li id="menu-item-219" class="menu-item menu-item-type-post_type menu-item- 
object-page menu-item-219"><a href="http://www.example.com/faq/">FAQ</a> 
</li> 
<li id="menu-item-239" class="menu-item menu-item-type-post_type menu-item- 
object-page menu-item-239"><a href="http://www.example.com/blog/">Blog</a> 
</li> 
       </ul> 
      </div> 
     </div> <!-- end of container --> 
    </nav> <!-- end of navbar --> 
</div> <!-- end of navbar-wrapper --> 

Und der nächste Teil der Seite ist wie unten. Die obige Navigationsleiste überschneidet sich tatsächlich mit dem "Über uns".

<div class="container"> 
    <h1>About Us</h1> 
    <p>A bunch of text goes here</p> 
</div> 

Jede Hilfe sehr geschätzt.

Answer 1

Ich glaube, ich habe es behoben. Ich möchte den Navbar-Fixed-Top behalten. Um das Obige zu lösen, fügte ich zu meiner CSS folgendes hinzu:

body { 
    margin-top: 50px; 
}